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