Ant Design4.0-Table

最新推荐文章于 2023-04-27 14:42:19 发布

kelly0721

最新推荐文章于 2023-04-27 14:42:19 发布

阅读量131

点赞数

分类专栏： Ant Design

本文链接：https://blog.csdn.net/kelly0721/article/details/111254005

版权

Ant Design 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

在开发的过程中，使用 Table 组件的expandedRowKeys 发生只有点击默认展开icon时，自己编写的expandedRowKeys才生效，当在其他地方设置函数改变expandedRowKeys时不生效，在github调研之后发现，是我的写法出现问题了。虽然不懂为什么那么写会出错…

之前的代码
点击Table的展开icon，expandedRowRender 内容能显示，点击【展开】，expandedRowRender 内容不显示

const columns = [
      { title: "Name", dataIndex: "name" },
      { title: "Age", dataIndex: "age"},
      { title: "Address", dataIndex: "address"},
      {
        title: "Action",
        dataIndex: "action",
        render: (text, record) => (
          <div>
            <a
            onClick={() => {
              this.handleExpand(false, record.key);
            }}
            >收起</a>
            <a
              onClick={() => {
                this.handleExpand(true, record.key);
              }}
            >
              展开
            </a>
          </div>
        )
      }
    ];
const data = [
  {
    key: 1,
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
    description:
      "My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."
  }
];
 handleExpand = (expanded, key) => {
 	const { expandedRowKeys } = this.state;
    if (!expanded && expandedRowKeys.includes(key)) {
      expandedRowKeys.forEach((t, i) => {
        if (t === key) expandedRowKeys.splice(i, 1);
      });
    } else if (!expandedRowKeys.includes(key)) expandedRowKeys.push(key);
    this.setState({ expandedRowKeys });
  };
<Table
  columns={columns}
  dataSource={data}
  rowKey={rowKey}
  expandedRowKeys={expandedRowKeys}
  onExpand={this.handleExpand}
  expandedRowRender={this.expandedRowRenderContent}
/>

之后的代码
主要是改变 expandedRowKeys 的获取方式，这样子写，点击展开，expandedRowRender 内容就能正确显示了

handleExpand = (expanded, key) => {
 	let expandedRowKeys = [...this.state.expandedRowKeys];
    if (!expanded && expandedRowKeys.includes(key)) {
      expandedRowKeys.forEach((t, i) => {
        if (t === key) expandedRowKeys.splice(i, 1);
      });
    } else if (!expandedRowKeys.includes(key)) expandedRowKeys.push(key);
    this.setState({ expandedRowKeys });
  };
<Table
  columns={columns}
  dataSource={data}
  rowKey={rowKey}
  expandedRowKeys={expandedRowKeys}
  onExpand={this.handleExpand}
  expandedRowRender={this.expandedRowRenderContent}
/>