antd table动态表头_React项目使用ant Table组件动态生成columns

要在React项目中使用Ant Design的Table组件动态生成表头，需要完成以下步骤：

1. 定义表格数据源

首先需要定义表格的数据源，可以使用一个数组来存储表格的数据，例如：

const data = [
  {
    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',
  },
];

2. 定义表头数据源

接下来需要定义表头的数据源，可以使用一个数组来存储表头的数据，例如：

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
];

3. 动态生成表头

在Ant Design的Table组件中，可以使用columns属性来指定表头数据源。为了动态生成表头，需要在渲染组件时动态生成表头的数据源，并将其传递给Table组件的columns属性，例如：

import React, { useState } from 'react';
import { Table } from 'antd';

const DynamicTable = () => {
  const [columns, setColumns] = useState([
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
  ]);

  const handleAddColumn = () => {
    const newColumn = {
      title: `Column ${columns.length + 1}`,
      dataIndex: `column${columns.length + 1}`,
      key: `column${columns.length + 1}`,
    };
    setColumns([...columns, newColumn]);
  };

  return (
    <>
      <button onClick={handleAddColumn}>Add Column</button>
      <Table dataSource={data} columns={columns} />
    </>
  );
};

export default DynamicTable;

在上面的代码中，我们使用useState钩子来定义表头的数据源，并渲染一个添加列的按钮。当点击添加列按钮时，会动态生成一个新的列，并将其添加到表头的数据源中。这样就可以动态生成表头了。