antd table动态表头_React项目使用ant Table组件动态生成columns
时间: 2023-12-02 16:06:22 浏览: 215
![ZIP](https://csdnimg.cn/release/download/static_files/pc/images/minetype/ZIP.png)
antd-form-builder:基于antd的动态元驱动React表单
要实现动态生成Table组件的columns,可以使用React的状态管理来实现。具体步骤如下:
1. 定义一个state来保存columns数组。初始值可以为一个空数组。
```javascript
const [columns, setColumns] = useState([]);
```
2. 在组件加载时,从数据源获取表头数据,并根据数据动态生成columns数组,然后将其保存到state中。
```javascript
useEffect(() => {
// 获取表头数据
const headers = fetchDataFromAPI();
// 根据表头数据动态生成columns数组
const newColumns = headers.map((header) => ({
title: header.name,
dataIndex: header.field,
}));
// 保存columns数组到state中
setColumns(newColumns);
}, []);
```
3. 在Table组件中使用动态生成的columns数组。
```javascript
<Table dataSource={data} columns={columns} />
```
完整代码如下:
```javascript
import React, { useState, useEffect } from 'react';
import { Table } from 'antd';
function DynamicTable() {
const [columns, setColumns] = useState([]);
useEffect(() => {
// 获取表头数据
const headers = fetchDataFromAPI();
// 根据表头数据动态生成columns数组
const newColumns = headers.map((header) => ({
title: header.name,
dataIndex: header.field,
}));
// 保存columns数组到state中
setColumns(newColumns);
}, []);
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',
},
];
return <Table dataSource={data} columns={columns} />;
}
export default DynamicTable;
```
阅读全文
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)