根据状态值更改蚂蚁设计表的标题

Question

在这里我需要一些帮助，在Ant Design表中，我需要根据状态值更改表的标题。在给定的沙箱示例中，列标题surname应更改为Second Name并打开，否则应仅显示surname。

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

谢谢。

Answer 1

您可以根据surNameShow

更改标题

render() {
    const { dataSource, surNameShow } = this.state;
    const columns = this.columns;
    // check and set title here
    // If you want to change the second column you can use index 1, if you want it to be dynamic just loop through columns array update column you desire
    if (surNameShow) {
      columns[1].title = "Second Name";
    } else {
      columns[1].title = "Surname";
    }
    return (
      <div>
        <p className="mr-3"> Change Surname to Second Name</p>
        <Switch onChange={() => this.handleChnage()} />
        <Table
          bordered
          dataSource={dataSource}
          columns={columns}
          pagination={false}
        />
      </div>
    );
  }

Codesandbox demo