从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.mzph.cn/news/884450.shtml

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

相关文章

js操作数组的方法 / js操作字符串的方法

操纵数组的方法 常见的有10种 push() -在数组末尾添加一个或多个元素&#xff0c;并返回新的长度。 pop() -删除数组的最后一个元素&#xff0c;并返回那个元素。 shift() -删除数组的第一个元素&#xff0c;并返回那个元素。 unshift() -在数组的开始添加一个或多个元素&…

计算机毕业设计Hadoop+大模型地震预测系统 地震数据分析可视化 地震爬虫 大数据毕业设计 Spark 机器学习 深度学习 Flink 大数据

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

Redis到底支不支持事务?半事务

redis是支持事务的&#xff0c;它与传统的关系数据库中的事务有所不同。 1.原子性&#xff1a; redis事务保证的是队列中的命令作为一个整体要么全部执行&#xff0c;要么全部不执行。但是&#xff0c;如果事务中的某个命令因为执行错误而失败&#xff0c;redis会继续执行事务…

数据结构和算法(六):贪心算法、分治算法、回溯算法、动态规划、拓扑排序

从广义上来讲&#xff1a;数据结构就是一组数据的存储结构 &#xff0c; 算法就是操作数据的方法 数据结构是为算法服务的&#xff0c;算法是要作用在特定的数据结构上的。 10个最常用的数据结构&#xff1a;数组、链表、栈、队列、散列表、二叉树、堆、跳表、图、Trie树 10个最…

浅谈二进制位移

一、基本形式 二进制位移操作是计算机编程中常用的一种位操作&#xff0c;它可以用来实现乘除操作、数据压缩和扩展等。位移操作包括左移和右移两种基本形式&#xff1a; 1、左移&#xff08;Left Shift&#xff09;&#xff1a; 符号&#xff1a;<<功能&#xff1a;将…

顺序表和链表(一)

目录 线性表 一、顺序表 <1>顺序表 &#xff08;1&#xff09;静态顺序表 &#xff08;2&#xff09;动态顺序表-按需申请 <2>链表 &#xff08;1&#xff09;单链表 &#xff08;2&#xff09;双链表 主程序&#xff08;test.c&#xff09; 头文件&#…

pgsql数据量大之后可能遇到的问题

当 PostgreSQL 数据量增大时&#xff0c;可能会遇到以下问题&#xff1a; 查询性能下降&#xff1a;随着数据量的增加&#xff0c;查询可能会变得缓慢&#xff0c;尤其是在没有适当索引的情况下。大量的数据意味着更多的行需要被扫描和过滤&#xff0c;这会显著增加查询执行时间…

样本不均衡与异常点检测处理|SMOTE|LOF|IForest

在机器学习中&#xff0c;数据样本不均衡和异常值检测是数据科学家和机器学习工程师经常面临的挑战。这些问题如果不加以处理&#xff0c;会严重影响模型的性能和准确性。本文将概述这些问题&#xff0c;并提出相应的解决方案。 样本不均衡概述 在分类任务中&#xff0c;样本…

aws boto3 下载文件

起因&#xff1a;有下载 aws s3 需求&#xff0c;但只有web 登录账号&#xff0c;有 id 用户名 密码&#xff0c;没有 boto3 的 key ID 经过分析&#xff0c;发现网页版有个地址会返回临时 keyID&#xff0c;playwright 模拟登录&#xff0c;用 page.on 监测返回数据&#xff…

# Ubuntu 达人九步养成记(1)

Ubuntu 达人九步养成记&#xff08;1&#xff09; 目录&#xff1a; 一、ubuntu基本安装 二、设置语言环境 三、设置服务器镜像源 四、在启动栏添加终端图标 五、使用apt更新和升级系统软件 六、使用apt安装软件 七、使用apt删除软件以及apt-get 八、deb格式及谷歌浏览…

QT——TCP网络调试助手

目录 一.项目展示 ​编辑 二.开发流程 三.QTcpServer、QTcpSocket、QUdpSocket类的学习 1.QTcpServer服务端 2.QTcpSocket客户端 3.Udp通信 四.网络调试助手 1.首先我们实现当用户选择不同协议类型时不同的UI组件如何切换 2.实现打开/关闭按键图片的切换 方式一&…

InsuranceclaimsController

目录 1、 InsuranceclaimsController 1.1、 SelectInsurances 1.1.1、 //单据状态名称 1.1.2、 //报案编号 1.1.3、 //保单金额 InsuranceclaimsController using QXQPS.Models; using QXQPS.Vo; using System; using System.Collections; using System.Collec…

导航栏渐变色iOS

- (void)viewDidLoad {[super viewDidLoad];// 设置导航栏属性self.navigationBar.translucent NO;[self.navigationBar setTitleTextAttributes:{NSForegroundColorAttributeName : [UIColor whiteColor], NSFontAttributeName:[UIFont boldSystemFontOfSize:28]}];// 修复iO…

layui tree customSelet选中的内容重写,查找父级

layui tree customSelet选中的内容重写&#xff0c;查找父级 需要重新源码 // 递归查找函数 // tree 所有数据 &#xff0c;nodeId选中数据id值 function findParent(tree, nodeId, parent null) {for (let i 0; i < tree.length; i) {if (tree[i].id nodeId) {return …

《Web性能权威指南》-浏览器API与协议-读书笔记

本文是《Web性能权威指南》第四部分——浏览器API与协议的读书笔记。 第一部分——网络技术概览&#xff0c;请参考网络技术概览&#xff1b; 第二部分——无线网络性能&#xff0c;请参考无线网络性能&#xff1b; 第三部分——HTTP&#xff0c;请参考HTTP。 浏览器网络概述 …

使用TypeORM进行数据库操作

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 使用TypeORM进行数据库操作 引言 TypeORM 简介 安装 TypeORM 配置 TypeORM 定义实体 连接数据库 运行项目 高级功能 事务管理 关…

架构师之路-学渣到学霸历程-38

nginx的热部署&#xff08;方案二&#xff09; 方案一的缺点就是直接升级完成了&#xff1b; 那么问题来了&#xff1a; 如果说出现问题了&#xff0c;想要回退 那么应该怎么处理&#xff1f;所以最好就是有一段的缓冲期限&#xff1b; 那么久可以直接 从升级的方案来进行 …

ESP-HaloPanel:用 ESP32-C2 打造超低成本智能家居面板

项目简介 在生活品质日益提升的今天&#xff0c;智能家居系统已经走进了千家万户&#xff0c;并逐渐成为现代生活的一部份。与此同时&#xff0c;一款设计精致、体积轻盈、操作简便的全屋智能家居控制面板&#xff0c;已经成为众多家庭的新宠。这种高效、直观的智能化的解决方…

Hadoop生态圈框架部署(四)- Hadoop完全分布式部署

文章目录 前言一、Hadoop完全分布式部署&#xff08;手动部署&#xff09;1. 下载hadoop2. 上传安装包2. 解压hadoop安装包3. 配置hadoop配置文件3.1 虚拟机hadoop1修改hadoop配置文件3.1.1 修改 hadoop-env.sh 配置文件3.3.2 修改 core-site.xml 配置文件3.3.3 修改 hdfs-site…

数据分析SPSS面试题及参考答案

目录 SPSS 的全称是什么? SPSS 的主要用途是什么? 如何打开 SPSS 数据文件? 什么是数据视图和变量视图?它们的作用分别是什么? 如何定义变量的类型、标签和值? SPSS 中支持哪些数据类型? SPSS 中如何处理缺失值? 解释一下 SPSS 中缺失值的处理方法有哪些? 描…