从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. 列配置对象
- 每个列配置对象包含多个属性,如
title
、dataIndex
、ellipsis
、width
等。
{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 || [];