首页 > 解决方案 > 使用antd隐藏表格的列

问题描述

我们如何从表格中隐藏一个列以在前端显示,该列已经存在于数组中以使用 ant design table?

例如,我的数组对象中有一个名为 ID 的列,但不需要在表格视图中显示,它应该保存在 JSON 列表本身中以供参考。

小提琴链接- 在本例中,我不想在表中显示 ID 列,但我已将 ID 用于某些参考,例如行删除。

标签: antd

解决方案


如果您已经有了生成列的代码,那么比实现自定义渲染方法来隐藏列更简单的选项就是将其从已完成的列列表中过滤出来,例如:

let columns = [
  {
    title: "Id",
    dataIndex: "id",
    key: "id"
  },
  {
    title: "Name",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address"
  }
];

return columns.filter(col => col.dataIndex !== 'id');

推荐阅读