antd 设置表头属性,使用表数据自定义React Antd表头

如果要使用表数据自定义React Antd表头，可以使用Antd Table组件的render函数来自定义表头。

首先，你需要定义一个表格数据源，例如：

const dataSource = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
];

然后，你可以使用Table组件的columns属性来定义表头。在columns中，可以使用render函数来自定义表头的展示方式，例如：

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    render: (text, record) => (
      <span>
        {text} - {record.address}
      </span>
    ),
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
];

在上面的代码中，我们使用render函数来自定义了Name列的展示方式，将姓名和地址连接起来展示。

最后，将dataSource和columns作为Table组件的属性传入即可自定义Antd表头。例如：

<Table dataSource={dataSource} columns={columns} />