React的Ant设计:显示/隐藏特定的列 [英] Ant Design for React : Show/Hide particular column

问题描述

在这里我需要一些帮助，在Ant Design表中，我需要根据状态值来隐藏/显示表的特定列.在给定的沙盒链接中，每当开关处于关闭状态时，我都需要隐藏姓氏列，而在开关处于打开状态时，则需要显示该姓氏列.

I need a bit of help here, In an Ant Design table, I need to hide/show a particular column of a table depending on a state value. In the given sandbox link, I need to hide the surname column whenever the switch is Off and show when the switch is On.

请有人帮忙研究一下，帮帮我.

Please, someone, look into this, and help me out.

参考: https://codesandbox.io/s/purple-sun-1rtz1?file =/index.js

推荐答案

有一个有效的代码，但应根据您的需要对其进行更多的自定义，交互激活和重构:

There is a working code, but it should be more customize, interactivize, and refactorize depending on your need:

// You can also modify the data in the `handleChnage`
// Or conditionally display it like here:

class EditableTable extends React.Component {
  state = {
    surNameShow: false
  };
  constructor(props) {
    super(props);
    this.columns = [
      {
        title: "Name",
        dataIndex: "name",
        width: "30%"
      },
      {
        title: "Surname",
        dataIndex: "surname",
        width: "30%"
      }
    ];
    this.state = {
      dataSource: [
        {
          key: "0",
          name: "Edward 1",
          surname: "King 1"
        },
        {
          key: "1",
          name: "Edward 2",
          surname: "King 2"
        }
      ]
    };
  }
  handleChnage = key => {
    this.setState({ surNameShow: !this.state.surNameShow }, () => {
      console.log(this.state.surNameShow);
    });
  };

  render() {
    const { dataSource } = this.state;
    const columns = this.columns;
    return (
      <div>
        <p className="mr-3"> Show surname</p>
        <Switch onChange={() => this.handleChnage()} />
        <Table
          bordered
          dataSource={dataSource}
          columns={
            this.state.surNameShow
              ? columns
              : columns.filter(ea => ea.dataIndex !== "surname")
          }
          pagination={false}
        />
      </div>
    );
  }
}

ReactDOM.render(<EditableTable />, document.getElementById("container"));

这篇关于React的Ant设计:显示/隐藏特定的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！