从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) => [
<Dropdown
key={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 || [];