react antd table 动态隐藏指定的一列

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',
  })
}

你可能感兴趣的:(Ant,Design,for,React,react.js,javascript,前端)