ant Table组件动态生成columns
时间: 2023-08-08 21:07:00 浏览: 85
Ant Design的Table组件可以动态生成columns,您可以使用数组的方式来定义columns。以下是一个示例代码:
```
import { Table } from 'antd';
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '地址',
dataIndex: 'address',
key: 'address',
},
];
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',
},
];
function App() {
return (
<Table columns={columns} dataSource={data} />
);
}
export default App;
```
在上面的示例中,定义了一个columns数组,其中包含了三个列,分别为“姓名”、“年龄”和“地址”。然后在Table组件中,将columns数组传递给columns属性,同时将数据源data传递给dataSource属性,就可以渲染出一个包含了三列数据的表格。如果您想要动态生成columns,只需要在运行时根据您的数据源动态生成一个包含列信息的数组即可。