next.js - Antd可展开表，点击展开按钮同时展开所有行

Question

我在 Next.js v10.0.4 的应用程序中使用了 antd design 4.10 版的可扩展表。当我单击+表中的按钮时，它假设只打开选定的行，但我不知道为什么它同时打开所有行。

这是我的表格组件：

<Table
    size="small"
    dataSource={data}
    columns={updateColumns}
    expandable={{
      expandedRowRender: (record) => (
        <p style={{ margin: 0 }}>{record.description}</p>
      ),
      rowExpandable: (record) => record.level !== "3",
      onExpand: (expanded, record) =>
        console.log("onExpand: ", record, expanded),
    }}
  />

与 antd design 中的文档代码完全相同：https ://ant.design/components/table/#components-table-demo-expand

Answer 1

您需要key为数据中的每条记录提供一个属性。如果你没有key属性，你可以使用prop在<Table>组件上指定它rowKey

<Table rowKey="your_data_id" />