reactjs - 根据状态值更改 Ant Design 表的标题

Question

我需要一点帮助，在 Ant Design 表中，我需要表的标题应该根据状态值而改变。在给定的沙盒示例中，列标题surname应更改为Second Name打开开关的位置，否则应surname仅显示。

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

谢谢你。

标签： reactjsstateantd

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 演示