antd 表格隐藏当前列
时间: 2023-11-14 20:43:32 浏览: 116
要隐藏 Ant Design(antd)表格中的当前列,您可以使用 `columns` 属性中的 `render` 方法来自定义表格列的渲染方式。在 `render` 方法中,您可以根据需要返回不同的内容,包括空值(null)来隐藏该列。
以下是一个示例代码,演示如何隐藏表格中的当前列:
```jsx
import { Table } from 'antd';
const data = [
{ id: 1, name: 'John', age: 25 },
{ id: 2, name: 'Jane', age: 30 },
{ id: 3, name: 'Tom', age: 35 },
];
const columns = [
{ title: 'ID', dataIndex: 'id', key: 'id' },
{ title: 'Name', dataIndex: 'name', key: 'name' },
{
title: 'Age',
dataIndex: 'age',
key: 'age',
render: (text, record) => null, // 返回 null 来隐藏该列
},
];
const ExampleTable = () => {
return <Table dataSource={data} columns={columns} />;
};
```
在上面的示例中,我们在 `columns` 数组中的 `Age` 列中使用了 `render` 方法,并返回了一个空值(null)。这将导致表格在渲染时不显示该列。
请注意,这只是一种隐藏当前列的方法,但数据仍然存在于数据源中。如果您需要在后续操作中使用该列的数据,仍然可以访问它。
阅读全文