Ant Design for React显示/隐藏特定列,参考文档里面没有API能单独控制某一个列,而在项目中经常会遇见在特定环境下,我需要指定某一列不给没有相应权限的用户展示,但是好在可以控制columns,下文我将介绍如何控制columns,实现列的动态展示和隐藏。
antd中 Table组件的部分介绍了如何最基础的指定表格的数据源创建一个表格。
//指定表格的数据源 dataSource 为一个数组
const dataSource = [
{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
];
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
},
];
<Table dataSource={dataSource} columns={columns} />;
假设我们这里的需求是只对“指定权限的对象”展示“地址”这一栏,那么我们可以用JS的splice方法,加上判断条件,控制是否展示这一列
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
];
if('添加的权限或者判断条件'){
columns.splice(14, 0, {
title: '住址',
dataIndex: 'address',
key: 'address',
})
}