要在antd表格中动态添加列,你需要使用`columns`属性并根据需要动态更新它。
下面是一个示例代码:
```jsx
import React, { useState } from 'react';
import { Table, Button } from 'antd';
const DynamicTable = () => {
const [columns, setColumns] = useState([
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
]);
const handleAddColumn = () => {
const newColumn = {
title: 'Address',
dataIndex: 'address',
key: 'address',
};
setColumns([...columns, newColumn]);
};
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 (
<>
<Button onClick={handleAddColumn}>Add Column</Button>
<Table columns={columns} dataSource={data} />
</>
);
};
export default DynamicTable;
```
在这个例子中,我们使用`useState`来跟踪当前的列,然后在添加列的按钮上设置一个事件处理程序,该处理程序将新列添加到列数组中。这将刷新表格并显示新列。
请注意,新列需要包含`title`,`dataIndex`和`key`属性。`title`是列标题,`dataIndex`是该列在数据源中对应的键,`key`是该列的唯一键。
希望这可以帮助你实现antd表格中的动态列添加。