当前位置: 首页 > news >正文

从0学习React(10)

示例代码:

const columns: ProColumns<API.BasicInfoItem>[] = [{title: '设备编码',dataIndex: 'deviceCode',ellipsis: true,width: 40,},{title: '设备名称',dataIndex: 'deviceName',ellipsis: true,width: 50,},{title: '产线-工序',dataIndex: 'deviceClassifyName',ellipsis: true,search: false,width: 40,},{title: '规格',dataIndex: 'deviceSpecification',ellipsis: true,search: false,width: 30,},{title: '型号',dataIndex: 'deviceModel',ellipsis: true,search: false,width: 30,},{title: '设备等级',dataIndex: 'deviceType',ellipsis: true,width: 30,search: false,valueType: 'select',request: async () => {const { data } = await getBaseDefineOption('DEVICE_CLASS');return data || [];},},{title: '设备状态',dataIndex: 'state',ellipsis: true,width: 30,valueType: 'select',request: async () => {const { data } = await getBaseDefineOption('DEVICE_STATE');return data || [];},},{title: '操作',dataIndex: 'option',valueType: 'option',fixed: 'right',width: 30,render: (_, record) => [<Dropdownkey={record.id}menu={{items,onClick: (menu) => {switch (menu.key) {case 'edit':setCurrentRow(record);setType(2);openDetail();break;case 'view':setCurrentRow(record);setType(3);openDetail();break;case 'copy':handleModalVisible(true);setCurrentRow(record.id);break;case 'del':Modal.confirm({title: '确认',icon: <ExclamationCircleOutlined />,content: '确定删除设备信息吗?',okText: '确认',cancelText: '取消',onOk: () => {delBasicInfo(record.id).then((res) => {if (res.code === '00000') {message.success('已删除该设备信息!');// 刷新表格数据actionRef.current?.reload();}});},});break;}},}}><Button icon={<UnorderedListOutlined />} size="small" type="primary"><DownOutlined /></Button></Dropdown>,],},
];

这段代码定义了一个名为 columns 的数组,用于配置 ProTable 的列。每个列对象包含列的标题、数据索引、宽度、是否启用省略号、搜索配置、值类型等属性。最后一列是一个操作列,包含一个下拉菜单,用于执行编辑、查看、复制和删除操作。

使用的语法和概念

1. TypeScript 类型注释
  • ProColumns<API.BasicInfoItem>[] 指定了 columns 数组的类型。
  • ProColumns 是 ProTable 的列配置类型,API.BasicInfoItem 是数据项的类型。
const columns: ProColumns<API.BasicInfoItem>[] = [ ... ];
2. 列配置对象
  • 每个列配置对象包含多个属性,如 titledataIndexellipsiswidth 等。
{title: '设备编码',dataIndex: 'deviceCode',ellipsis: true,width: 40,
}
3. 异步请求数据
  • request 属性用于异步请求数据,返回一个 Promise 对象。
{title: '设备等级',dataIndex: 'deviceType',ellipsis: true,width: 30,search: false,valueType: 'select',request: async () => {const { data } = await getBaseDefineOption('DEVICE_CLASS');return data || [];},
}

看完这里,其实也还不算很懂,因为有些代码的意思我还没理解,于是我问AI,这段代码什么意思:

{title: '设备等级',dataIndex: 'deviceType',ellipsis: true,width: 30,search: false,valueType: 'select',request: async () => {const { data } = await getBaseDefineOption('DEVICE_CLASS');return data || [];},
}

代码解析

1. title: '设备等级'
  • title 属性指定了列的标题,显示为“设备等级”。
2. dataIndex: 'deviceType'
  • dataIndex 属性指定了列对应的数据字段,即 deviceType
3. ellipsis: true
  • ellipsis 属性指定了文本是否超出时显示省略号。
4. width: 30
  • width 属性指定了列的宽度,为 30。
5. search: false
  • search 属性指定了该列是否在表格的搜索表单中显示。设置为 false 表示不显示。
6. valueType: 'select'
  • valueType 属性指定了列的值类型为 select,即下拉选择框。
7. request: async () => { ... }
  • request 属性是一个异步函数,用于异步请求数据。
  • 在这个例子中,request 函数调用 getBaseDefineOption 函数,传入 'DEVICE_CLASS' 作为参数,来获取设备等级的选项数据。
request: async () => {const { data } = await getBaseDefineOption('DEVICE_CLASS');return data || [];
},

使用的语法和概念

1. 异步函数(Async Function)
  • async 关键字用于定义一个异步函数,使其返回一个 Promise 对象。
  • await 关键字用于等待一个 Promise 对象的解析。
request: async () => {const { data } = await getBaseDefineOption('DEVICE_CLASS');return data || [];
},
2. 解构赋值(Destructuring Assignment)
  • 解构赋值语法用于从对象中提取数据,并将其赋值给变量。
const { data } = await getBaseDefineOption('DEVICE_CLASS');
3. 默认值(Default Value)
  • 使用 || 运算符指定一个默认值,即如果 data 为 null 或 undefined,则返回一个空数组 []
return data || [];

相关文章:

从0学习React(10)

示例代码&#xff1a; const columns: ProColumns<API.BasicInfoItem>[] [{title: 设备编码,dataIndex: deviceCode,ellipsis: true,width: 40,},{title: 设备名称,dataIndex: deviceName,ellipsis: true,width: 50,},{title: 产线-工序,dataIndex: deviceClassifyName…...

Redis-结构化value对象的类型

文章目录 一、Redis的结构化value对象类型的介绍二、Redis的这些结构化value对象类型的通用操作查看指定key的数据类型查看所有的key判断指定key是否存在为已存在的key进行重命名为指定key设置存活时间pexpire与expire 查看指定Key的存活时间为指定key设置成永久存活 三、Redis…...

【QT】Qt对话框

个人主页~ Qt窗口属性~ Qt窗口 五、对话框2、Qt内置对话框&#xff08;1&#xff09;Message Box&#xff08;2&#xff09;QColorDialog&#xff08;3&#xff09;QFileDialog&#xff08;4&#xff09;QFontDialog&#xff08;5&#xff09;QInputDialog 五、对话框 2、Qt内…...

【计算机网络篇】数据链路层(14)虚拟局域网VLAN(概述,实现机制)

文章目录 &#x1f6f8;虚拟局域网VLAN&#x1f354;虚拟局域网VLAN的实现机制&#x1f95a;IEEE 802.1Q帧&#x1f95a;以太网交换机的接口类型&#x1f5d2;️例一&#xff1a;在一个交换机上不进行人为的VLAN划分&#xff0c;交换机各接口默认属于VLAN1且类型为Access的情况…...

伺服中的电子凸轮与追剪

一、机械凸轮 机械凸轮是一个具有曲线轮廓或凹槽的构件&#xff0c;它把运动特性传递给紧靠其边缘移动的推杆&#xff0c;推杆又带动机架做周期性运动。 凸轮的推杆位置跟随凸轮角度的周期性变化而变化&#xff0c;其运动特性与机械凸轮的外形相关&#xff0c;定义凸轮…...

Oracle 第22章:数据仓库与OLAP

第22章&#xff1a;数据仓库与OLAP 1. 数据仓库概念 数据仓库&#xff08;Data Warehouse, DW&#xff09; 是一个面向主题的、集成的、相对稳定的、反映历史变化的数据集合&#xff0c;用于支持管理决策。数据仓库中的数据通常来自不同的操作型系统或外部数据源&#xff0c;…...

在Ubuntu上安装TensorFlow与Keras

文章目录 1. 查看系统和Python版本信息1.1 查看Ubuntu版本信息1.2 查看Python版本信息 2. 安装pip2.1 下载get-pip.py2.2 运行get-pip.py2.3 查看pip版本 3. 安装Jupyter Notebook3.1 安装Jupyter Notebook3.2 运行Jupyter Notebook3.3 安装jupyter-core3.4 配置Jupyter Notebo…...

vue data变量之间相互赋值或进行数据联动

摘要&#xff1a; 使用vue时开发会用到data中是数据是相互驱动&#xff0c;经常会想到watch,computed&#xff0c;总结一下&#xff01; 直接赋值&#xff1a; 在 data 函数中定义的变量可以直接在方法中进行赋值。 export default {data() {return {a: 1,b: 2};},methods: {u…...

如何理解ref,toRef,和toRefs

1. ref ref 是 Vue 3 提供的一个用于创建响应式数据的 API。它可以用来创建简单的响应式变量&#xff0c;例如数字、字符串、布尔值或对象等。通过使用ref&#xff0c;当数据发生变化时&#xff0c;相关的组件视图会自动更新。 用法 创建响应式数据&#xff1a; import { ref …...

从单一到多元:揭秘 Hexo Diversity 主题的运行原理

揭秘 Hexo Diversity 主题的运行原理 一、 引言二、 Diversity 主题2.1 Hexo 控制台命令2.2 Hexo 核心 API2.3 运行原理2.3.1 多主题配置相关2.3.2 多主题执行指令 2.4 版本演进2.4.1 V1版本2.4.2 V2版本2.4.2.1 PC 端2.4.2.2 Phone 端 2.5 后续展望 三、 总结 一、 引言 众所…...

软考中级(系统集成项目管理工程师)案例分析计算题-笔记

案例分析计算题必拿分&#xff01;&#xff01; 1.成本进度管理 初中数学题&#xff0c;整了一堆缩写&#xff0c;容易给人绕晕 知道英文全称后就好理解了名词汇总&#xff1a; 英文缩写英文全称含义公式PVPlanned Value (计划值)按照计划到当前时间点需要花费的钱根据题目自…...

Docker打包自己项目推到Docker hub仓库(windows10)

一、启用Hyper-V和容器特性 1.应用和功能 2.点击程序和功能 3.启用或关闭Windows功能 4.开启Hyper-V 和 容器特性 记得重启生效&#xff01;&#xff01;&#xff01; 二、安装WSL2&#xff1a;写文章-CSDN创作中心https://mp.csdn.net/mp_blog/creation/editor/143057041 三…...

CesiumJS 案例 P20:监听鼠标滚轮、监听鼠标左键按下与松开、监听鼠标右键按下与松开、监听鼠标左击落点

CesiumJS CesiumJS 是一个开源的 JavaScript 库&#xff0c;它用于在网页中创建和控制 3D 地球仪&#xff08;地图&#xff09; CesiumJS 官网&#xff1a;https://www.cesium.com/ CesiumJS 下载地址&#xff1a;https://www.cesium.com/platform/cesiumjs/ CesiumJS API 文…...

如何使用Web-Check和cpolar实现安全的远程网站监测与管理

文章目录 前言1.关于Web-Check2.功能特点3.安装Docker4.创建并启动Web-Check容器5.本地访问测试6.公网远程访问本地Web-Check7.内网穿透工具安装8.创建远程连接公网地址9.使用固定公网地址远程访问 前言 本期给大家分享一个网站检测工具Web-Check&#xff0c;能帮你全面了解网…...

随机生成100组N个数并对比,C++,python,matlab,pair,std::piecewise_construct

随机生成100组N个数&#xff0c;数的范围是1到35&#xff0c;并检查是否包含目标数组的数字 python版本 import numpy as np def count_groups_containing_obj(N, obj):# 随机生成100组N个数&#xff0c;数的范围是1到35groups np.random.randint(1, 36, size(1000, N))#pri…...

python爬虫获取数据后的数据提取

文章目录 python爬虫中的数据提取1.Json格式数据的数据提取2.Html格式数据提取之bs4解析器如何使用快速使用对象的种类Tagname和attributes属性NavigableString(字符串)BeautifulSoupComment 子节点.contents.children.descendants 父节点.parent.parents 节点内容.string.stri…...

前段(vue)

目录 跨域是什么&#xff1f; SprinBoot跨域的三种解决方法 JavaScript 有 8 种数据类型&#xff0c; 金额的用什么类型。 前段 区别 JQuery使用$.ajax()实现异步请求 Vue 父子组件间的三种通信方式 Vue2 和 Vue3 存在多方面的区别。 跨域是什么&#xff1f; 跨域是指…...

pairwise算法之rank svm

众所周知&#xff0c;point-wise/pair-wise/list-wise是机器学习领域中重要的几种建模方法。比如&#xff0c;最常见的分类算法使用了point-wise&#xff0c;即一条样本对应一个label(0/1)&#xff0c;根据多条正负样本&#xff0c;使用交叉熵&#xff08;cross entropy&#x…...

SAP RFC 用户安全授权

一、SAP 通讯用户 对于RFC接口的用户&#xff0c;使用五种用户类型之一的“通讯”类型&#xff0c;这种类型的用户没有登陆SAPGUI的权限。 二、对调用的RFC授权 在通讯用户内部&#xff0c;权限对象&#xff1a;S_RFC中&#xff0c;限制进一步可以调用的RFC函数授权&#xff…...

记录新建wordpress站的实践踩坑:wordpress 上传源码新建站因权限问题导致无法访问、配置新站建站向导以及插件主题上传配置的解决办法

官方文档&#xff1a;How to install WordPress – Advanced Administration Handbook | Developer.WordPress.org 但是没写权限问题&#xff0c;可以下载到 wordpress官方包。 把下载的wordpresscn的包解压并上传到服务器目录下&#xff0c;但是因为是root上传导致了权限问题…...

【无线通信】多载波无线通信系统设计Matlab仿真

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;擅长毕业设计辅导、数学建模、数据处理、建模仿真、程序设计、完整代码获取、论文复现及科研仿真。 &#x1f447; 关注我领取海量matlab电子书和数学建模资料 &#x1f34a;个人信条&#xff1a;格物致知,完整…...

设备独立滚动控制:让macOS输入设备各得其所的开源解决方案

设备独立滚动控制&#xff1a;让macOS输入设备各得其所的开源解决方案 【免费下载链接】Scroll-Reverser Per-device scrolling prefs on macOS. 项目地址: https://gitcode.com/gh_mirrors/sc/Scroll-Reverser 问题溯源&#xff1a;当滚动方向成为效率隐形杀手 在数字…...

揭秘Zotero PDF Translate离线翻译方案:学术研究数据安全新范式

揭秘Zotero PDF Translate离线翻译方案&#xff1a;学术研究数据安全新范式 【免费下载链接】zotero-pdf-translate Translate PDF, EPub, webpage, metadata, annotations, notes to the target language. Support 20 translate services. 项目地址: https://gitcode.com/gh…...

Doorkeeper与Active Storage集成终极指南:如何为OAuth认证系统添加文件上传功能 [特殊字符]

Doorkeeper与Active Storage集成终极指南&#xff1a;如何为OAuth认证系统添加文件上传功能 &#x1f680; 【免费下载链接】doorkeeper Doorkeeper is an OAuth 2 provider for Ruby on Rails / Grape. 项目地址: https://gitcode.com/gh_mirrors/do/doorkeeper Doorke…...

终极NVIDIA显卡调优指南:5个隐藏设置提升游戏性能200%

终极NVIDIA显卡调优指南&#xff1a;5个隐藏设置提升游戏性能200% 【免费下载链接】nvidiaProfileInspector 项目地址: https://gitcode.com/gh_mirrors/nv/nvidiaProfileInspector NVIDIA显卡性能优化是每个游戏玩家都关注的核心话题&#xff0c;而通过专业工具NVIDIA…...

Step3-VL-10B多场景落地指南:从OCR到数学推理的10个高频使用模板

Step3-VL-10B多场景落地指南&#xff1a;从OCR到数学推理的10个高频使用模板 你是不是也遇到过这样的问题&#xff1f;面对一张图片&#xff0c;想提取里面的文字&#xff0c;得去找专门的OCR工具&#xff1b;想分析图片内容&#xff0c;得用图像识别软件&#xff1b;要是图片…...

智能型碧蓝航线自动化助手:AzurLaneAutoScript全方位游戏管理方案

智能型碧蓝航线自动化助手&#xff1a;AzurLaneAutoScript全方位游戏管理方案 【免费下载链接】AzurLaneAutoScript Azur Lane bot (CN/EN/JP/TW) 碧蓝航线脚本 | 无缝委托科研&#xff0c;全自动大世界 项目地址: https://gitcode.com/gh_mirrors/az/AzurLaneAutoScript …...

低成本GPU算力玩转大模型编剧:Pixel Script Temple双卡并行部署实操手册

低成本GPU算力玩转大模型编剧&#xff1a;Pixel Script Temple双卡并行部署实操手册 1. 项目概述 Pixel Script Temple是一款专为剧本创作设计的AI工具&#xff0c;基于Qwen2.5-14B-Instruct大模型深度微调而成。它最大的特点是能够在消费级GPU硬件上实现高效运行&#xff0c…...

鼎捷T100二次开发踩坑实录:修改规格后变量不自动生成怎么办?

鼎捷T100二次开发实战&#xff1a;规格修改后变量生成异常深度解析 在鼎捷T100系统的二次开发过程中&#xff0c;规格修改后的变量自动生成机制是开发者日常工作中频繁接触的核心功能之一。这个看似简单的自动化流程&#xff0c;在实际操作中却可能因为各种原因出现异常&#x…...

ESP32-S3双下载方案对比:VSCode一键烧录 vs 乐鑫Flash工具实操

ESP32-S3双下载方案深度评测&#xff1a;VSCode高效开发 vs 乐鑫工具链生产级部署 1. 开发环境配置与工具链解析 对于ESP32-S3开发者而言&#xff0c;选择正确的开发工具直接影响项目效率。当前主流方案可分为两类&#xff1a;基于VSCode的集成化开发环境和乐鑫官方Flash下载工…...