Question

我想解决一个问题。如何在React中使用Ant Design显示/隐藏表中的列？

export const columns = () => [
 {
   key: "anyKeyOne",
   title: "Title one",
   dataSource: "AnyOne",
   hide: true
 },
 {
   key: "anyKeyTwo",
   title: "TitleTwo",
   dataSource: "AnyTwo",
   hide: false
 }
]

hideColumns = () => {
 // 
}

render() {
 return (
  <div>
   <Table 
     dataSource={store.data}
     columns={this.hideColumns}
   />
  </div>
 )
}

谢谢您的回答。

Answer 1

使用此功能构建可见的列数组。它使用dataIndex比较需要显示的列名称。

可以通过推送复选框组中的值来形成arrayOfColumnNeeded。

java.lang.NoSuchFieldError: INSTANCE

Answer 2

您可以设置布尔状态属性，例如hideColumn

<div>
   <Table 
     dataSource={store.data}
     columns={this.state.hideColumn? this.state.columns: this.state.columns}
   />
  </div>

React-Antd-表中的显示/隐藏列

2 个答案: