antdesign table列如何动态隐藏和显示
时间: 2024-01-09 19:04:28 浏览: 72
Ant Design Table 组件中的列可以动态隐藏和显示,具体实现方式如下:
1. 在 Table 组件中的 columns 属性中,为每个列设置一个属性“visible”,表示该列是否可见。默认情况下,所有列都可见。
2. 通过控制“visible”属性的值,来动态隐藏或显示某些列。
例如,下面的代码演示了如何动态隐藏和显示第二列:
```jsx
import React, { useState } from 'react';
import { Table } from 'antd';
function DynamicTable() {
const [visible, setVisible] = useState(true);
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
visible: visible,
},
{
title: 'Address',
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',
},
];
const toggleVisible = () => {
setVisible(!visible);
};
return (
<div>
<button onClick={toggleVisible}>
{visible ? 'Hide Age Column' : 'Show Age Column'}
</button>
<Table columns={columns} dataSource={data} />
</div>
);
}
export default DynamicTable;
```
在上面的代码中,我们使用了 useState 钩子来控制第二列的可见性。默认情况下,该列是可见的。当用户点击按钮时,我们会调用 toggleVisible 函数,从而改变“visible”属性的值,实现动态隐藏或显示第二列。
需要注意的是,如果要动态隐藏或显示多个列,可以为每个列都设置“visible”属性,然后分别控制它们的值即可。