React 的 Ant 设计：显示/隐藏列

Question

我正在寻找一种在Ant Design 中隐藏/显示表格组件的列的方法

这个想法是每个列名都有一个复选框。取消选中列名时，该列将变为隐藏。

我之前使用过 react-table，它就像在列名中传递一个参数作为 prop 一样简单

但是，此选项在 Ant Design 中不可用。关于我应该在逻辑方面走的路有什么想法吗？

谢谢！

Answer 1

您可以将组件中的列作为function.

然后根据状态您可以隐藏或显示不同的列。您可以className向列添加 a或直接不渲染它。

getColumns = () => [
  {
    title: 'Client Name',
    dataIndex: 'clientName',
    className: this.state.columns['clientName'] ? "show" : "hide"
  }
];
render() {
  return <Table columns={this.getColumns()}>
}