antd 表格隐藏当前列
时间: 2023-11-14 08:45:51 浏览: 108
table 选择隐藏列
5星 · 资源好评率100%
要在 Ant Design 的表格中隐藏当前列,你可以使用 `columns` 属性来指定要显示的列,并在需要隐藏的列上设置 `hidden` 属性为 `true`。
下面是一个示例代码:
```jsx
import { Table } from 'antd';
const dataSource = [
{
key: '1',
name: 'John',
age: 32,
address: 'New York',
},
{
key: '2',
name: 'Mike',
age: 25,
address: 'London',
},
// ...
];
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
hidden: true, // 设置隐藏该列
},
// ...
];
const MyTable = () => (
<Table dataSource={dataSource} columns={columns} />
);
export default MyTable;
```
在上面的示例中,`columns` 数组中的 `Address` 列被设置为隐藏,因为它的 `hidden` 属性被设置为 `true`。这样,该列就不会在表格中显示出来。
阅读全文