从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 || [];

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/460138.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

正式入驻!上海斯歌BPM PaaS管理软件等产品入选华为云联营商品

近日&#xff0c;上海斯歌旗下BPM PaaS管理软件&#xff08;NBS&#xff09;等多款产品入选华为云云商店联营商品&#xff0c;上海斯歌正式成为华为云联营商品合作伙伴。用户登录华为云云商店即可采购上海斯歌的BPM PaaS产品及配套服务。通过联营模式&#xff0c;双方合作能够深…

「Mac畅玩鸿蒙与硬件7」鸿蒙开发环境配置篇7 - 使用命令行工具和本地模拟器管理项目

本篇将讲解在 macOS 上配置 HarmonyOS 开发环境的流程&#xff0c;聚焦 hvigorw 命令行工具的使用。我们将以创建 HelloWorld 项目为例&#xff0c;演示使用 hvigorw 进行项目构建、清理操作&#xff0c;并通过 DevEco Studio 的本地模拟器进行预览&#xff0c;帮助提升项目开发…

ECharts饼图,配置标注示例

const color ["#00FFB4", "#5498FD", "#6F54FD", "#FD5454", "#FDA354",]const datas [{ value: 100, name: "一年级" },{ value: 70, name: "二年级" },{ value: 184, name: "三年级" },{…

基于卷积神经网络的苹果病害识别与防治系统,resnet50,mobilenet模型【pytorch框架+python源码】

更多目标检测和图像分类识别项目可看我主页其他文章 功能演示&#xff1a; 苹果病害识别与防治系统&#xff0c;卷积神经网络&#xff0c;resnet50&#xff0c;mobilenet【pytorch框架&#xff0c;python源码】_哔哩哔哩_bilibili &#xff08;一&#xff09;简介 基于卷积…

YOLO即插即用模块---CAA

oly Kernel Inception Network for Remote Sensing Detection 论文地址&#xff1a;2403.06258https://arxiv.org/pdf/2403.06258 主要问题&#xff1a; 目标尺度变化大&#xff1a; 遥感图像中目标尺度范围广泛&#xff0c;从大型物体&#xff08;如足球场&#xff09;到小型…

【网络面试篇】TCP与UDP类

目录 一、综述 1. TCP与UDP的概念 2. 特点 3. 区别 4. 对应的使用场景 二、补充 1. 基础概念 &#xff08;1&#xff09;面向连接 &#xff08;2&#xff09;可靠的 &#xff08;3&#xff09;字节流 2. 相关问题 &#xff08;1&#xff09;TCP 和 UDP 可以同时绑定…

【C++】类和对象(六):运算符重载1

大家好&#xff0c;我是苏貝&#xff0c;本篇博客带大家了解C的运算符重载&#xff0c;如果你觉得我写的还不错的话&#xff0c;可以给我一个赞&#x1f44d;吗&#xff0c;感谢❤️ 目录 (A) 引入(B) 运算符重载 (A) 引入 写一个Date日期类&#xff0c;问&#xff1a;如果我…

C语言(一维数组)

如果对你有帮助&#xff0c;请点个免费的赞吧&#xff0c;谢谢汪。&#xff08;点个关注也可以&#xff01;&#xff09;\n\n如果以下内容需要补充和修改&#xff0c;请大家在评论区交流~ 思维导图 1.数组 由一个或多个相同的数据类型组成的集合 特点&#xff1a; 数据类型相…

Mount Image Pro,在取证安全的环境中挂载和访问镜像文件内容

天津鸿萌科贸发展有限公司从事数据安全服务二十余年&#xff0c;致力于为各领域客户提供专业的数据恢复、数据备份解决方案与服务&#xff0c;并针对企业面临的数据安全风险&#xff0c;提供专业的相关数据安全培训。 天津鸿萌科贸发展有限公司是 GetData 公司数据恢复与取证工…

上市公司企业数字金融认知数据集(2001-2023年)

一、测算方式&#xff1a;参考C刊《经济学家》王诗卉&#xff08;2021&#xff09;老师的做法&#xff0c;数字金融认知使用每万字年报描述中包含的对数字金融相关关键词的提及次数&#xff0c;关键词为&#xff1a;互联网、数字化、智能、大数据、电子银行、金融科技、科技金融…

【Mybatis】动态SQL+配置文件+数据库连接池+企业规范(10)

本系列共涉及4个框架&#xff1a;Sping,SpringBoot,Spring MVC,Mybatis。 博客涉及框架的重要知识点&#xff0c;根据序号学习即可。 目录 本系列共涉及4个框架&#xff1a;Sping,SpringBoot,Spring MVC,Mybatis。 博客涉及框架的重要知识点&#xff0c;根据序号学习即可。 …

Web3的去中心化社交网络:区块链技术如何改变互动方式

随着互联网技术的不断进步&#xff0c;社交网络正在经历一场深刻的变革。Web3&#xff0c;作为新一代互联网技术的代表&#xff0c;正通过区块链和去中心化理念改变着我们与他人互动的方式。传统的社交网络通常由大型公司控制&#xff0c;用户数据的集中化管理和隐私问题备受关…

大数据-191 Elasticsearch - ES 集群模式 配置启动 规划调优

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

短信登录的实现-redis和session的比较

目录 短信登录功能的实现一&#xff1a;基于session进行短信登录1&#xff1a;发送验证码2&#xff1a;登录3&#xff1a;登录验证拦截器4&#xff1a;隐藏用户敏感信息二&#xff1a;session的集群共享问题三&#xff1a;基于redis实现短信登录登录的刷新问题 短信登录功能的实…

中欧科学家论坛暨第六届人工智能与先进制造国际会议(AIAM 2024)在德国法兰克福成功举办,两百余名中外科学家共襄盛举

2024年10月20至21日&#xff0c;首届中欧科学家论坛在德国法兰克福的SAALBAU Titus Forum国际会议中心成功举行。中国驻法兰克福总领事馆伍鹏飞副总领事、德国兰斯巴赫-鲍姆巴赫市市长Michael Merz亲自出席并致辞。2004年诺贝尔化学奖得主Aaron Ciechanover教授和法国国家科学院…

直接删除Github上的文件

直接删除Github上的文件 说明&#xff1a;此操作只删除Github上的文件&#xff0c;本地仓库文件不受影响 1.确定要删除哪个分支文件,以删除main为例&#xff0c; 1.找到本地仓库位置以StudyNote为例&#xff0c;右键 bash here 2.打开命令窗口&#xff0c;将Github的StudyN…

SpringBoot篇(运维实用篇 - 日志)

目录 一、简介 二、代码中使用日志工具记录日志 1. 操作步骤 步骤1&#xff1a;添加日志记录操作 步骤2&#xff1a;设置日志输出级别 步骤3&#xff1a;设置日志组 2. 知识小结 三、优化日志对象创建代码 1. 实例 2. 总结 四、日志输出格式控制 1. 实例 2. 总结 …

Java多线程编程基础

目录 编写第一个多线程程序 1. 方式一 : 继承Thread类, 重写run方法 2. 方式二: 实现Runnable接口, 重写run方法 3. 方式三: 使用Lambda表达式 [匿名内部类] [Lambda表达式] 在上个文章中, 我们了解了进程和线程的相关概念. 那么, 在Java中, 我们如何进行多线程编程呢? …

postman的脚本设置接口关联

pm常用的对象 变量基础知识 postman获取响应结果的脚本的编写 下面是购物场景存在接口信息的关联 登录进入---搜索商品---进入商品详情---加入购物车 资源在附件中&#xff0c;可以私聊单独发送 postman的SHA256加密 var CryptoJS require(crypto-js);// 需要加密的字符串 …

ip地址分为几大类-IP和子网掩码对照表

一、IP地址的基本概念与分类 IP地址是用于在网络中标识每个设备的逻辑地址。互联网协议将IP地址分为A、B、C、D和E五类&#xff0c;其中A、B、C三类最常用&#xff0c;它们主要根据地址的首位位数以及用途进行划分。 A类地址&#xff1a; 范围&#xff1a;0.0.0.0 - 127.255.2…