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

问题描述

我需要一些帮助，在 Ant Design 表中，我需要根据状态值隐藏/显示表的特定列.在给定的沙箱链接中，我需要在开关关闭时隐藏姓氏列，并在开关打开时显示.

请某人调查一下并帮助我.

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

解决方案

有一个工作代码，但应该根据您的需要进行更多的定制、交互和重构:

//也可以修改`handleChnage`中的数据//或者像这里有条件地显示它:class EditableTable 扩展 React.Component {状态 = {姓氏显示:假};构造函数(道具){超级(道具)；this.columns = [{标题:姓名"，数据索引:名称"，宽度:30%"},{title: 《姓氏》,数据索引:姓氏"，宽度:30%"}];this.state = {数据源: [{键:0"，名称:爱德华一号"，姓氏:王一"},{键:1"，名称:爱德华2"，姓氏:《王2》}]};}handleChnage = 键 =>{this.setState({ surNameShow: !this.state.surNameShow }, () => {console.log(this.state.surNameShow);});};使成为() {const { 数据源 } = this.state;const 列 = this.columns;返回 (<div><p className=mr-3">显示姓氏</p><开关 onChange={() =>this.handleChnage()}/><表有边框的数据源={数据源}列={this.state.surNameShow?列: columns.filter(ea => ea.dataIndex !== 姓氏")}分页={假}/>

);}}ReactDOM.render(, document.getElementById(container"));

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.

Reference: 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"));

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