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

【问题标题】：Ant Design for React : Show/Hide columnsReact 的 Ant 设计：显示/隐藏列
【发布时间】：2017-10-25 09:13:30
【问题描述】：

我正在寻找一种方法来隐藏/显示 Table Component 中 Ant Design 中的列

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

我之前用过 react-table，就像passing a parameter in the column name as a prop 一样简单

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

谢谢！

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您可以将组件中的列设为function。

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

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

【讨论】：

【解决方案2】：

我设法通过创建原始列数组的副本和一个数组来解决这样的问题，该数组将保存每个相等的 dataIndex。然后我用过滤后的列数组替换当前列数组。代码下方：

const data = [];
for (let i = 0; i < 10; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  });
}

class App extends React.Component {
  state = {
    value: false,
    checkedColumns: [],
    visibleMenuSettings: false,
     columns: [
  {
    title: 'Name',
    dataIndex: 'name',
    
  },
  {
    title: 'Age',
    dataIndex: 'age',

  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
],
initialColumns: []
  };

  componentDidMount() {
    this.setState({initialColumns: this.state.columns})
  }

  handleVisibleChange = flag => {
    this.setState({ visibleMenuSettings: flag });
  };

  onChange = (e) => {
    var checkedColumns = this.state.checkedColumns
    if(e.target.checked){
    checkedColumns = checkedColumns.filter(id => {return id !== e.target.id})
    
    }
    else if(!e.target.checked){
    checkedColumns.push(e.target.id)
  
    }

  var filtered = this.state.initialColumns;
    for(var i =0;i< checkedColumns.length; i++)
    filtered = filtered.filter(el => {return el.dataIndex !== checkedColumns[i]})

    this.setState({columns: filtered, checkedColumns: checkedColumns})
  }

  render() {
      const menu = (
          <Menu>  
            <Menu.ItemGroup title="Columns" >
              <Menu.Item  key="4"><Checkbox id="age" onChange={this.onChange} defaultChecked>Age</Checkbox></Menu.Item>
              <Menu.Item key="5"><Checkbox id="address" onChange={this.onChange} defaultChecked>Address</Checkbox></Menu.Item>
            </Menu.ItemGroup>
          </Menu>
      );

    return (
      <div>
      <Dropdown
        overlay={menu}
        onVisibleChange={this.handleVisibleChange}
        visible={this.state.visibleMenuSettings}
      >
        <Button>Show/Hide</Button>
      </Dropdown>
        <Table columns={this.state.columns} dataSource={data} />
      </div>
    );
  }
}

这里还有一个工作示例：https://stackblitz.com/edit/antd-showhidecolumns

【讨论】：

【解决方案3】：

更优雅的解决方案（使用条件数组元素）：

const cols= [
  {
    title: 'Name',
    dataIndex: ['name'],
    key: 'name',
  },
    isElectron()?
    {
      title: 'Download',
      render: (val) => (<Button icon={<DownloadOutlined />} onClick={()=>downloadReportElectron(val)} />),
      width: 100,
    } : 
    {
      width: 0,
    },
  {
    title: 'Some',
    dataIndex: ['some'],
    key: 'some',
  },

只知道一些事情：

[{x},con?{x}:{},{x}] //would have worked, but it will render a col with width

这就是{width: 0,} 的来源。

【讨论】：