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

在 React 项目中使用 Ant Design 的 Table 组件动态生成 columns，可以通过以下步骤实现：

1. 定义一个 state 来存储 columns 数组，初始值为空数组。

state = {
  columns: [],
};

2. 在组件挂载时，根据数据生成 columns 数组，并更新 state。

componentDidMount() {
  // 根据数据生成 columns 数组
  const data = [
    { key: '1', name: 'John', age: 32, address: 'New York' },
    { key: '2', name: 'Mike', age: 25, address: 'London' },
  ];
  const columns = Object.keys(data[0]).map((key) => ({
    title: key,
    dataIndex: key,
    key,
  }));
  this.setState({ columns });
}

3. 在 render 方法中，将 columns 数组传递给 Table 组件的 columns 属性。

render() {
  return (
    <Table dataSource={data} columns={this.state.columns} />
  );
}

这样就可以动态生成表头了。需要注意的是，数据源的 key 值需要与 columns 数组中的 dataIndex 值对应。