0

我正在使用 Ant Design 表，其中我正在使用行扩展功能。我的查询是当我单击该行正在打开的表的任何行时，但问题是当我单击其他行时，前一行仍然打开，我只想要这样的功能，如果我单击任何行，另一个已经打开的行应该关闭.....如果有人有解决方案，请在stackBlitz中给我演示......提前谢谢

4

1 回答 1

1

检查 antd 文档AntD/#expandable。

这很简单。AntD 表具有expandable接受许多变量的参数，例如expandedRowKeys保存已扩展行的女巫，onExpand这是当您单击图标以展开它时调用的方法。一种简单的方法是创建自己的变量来保存像这样扩展的键

const [expandedKey, setExpandedKey] = useState(null);

并为当行被扩展时创建一个新方法

const onExpand = (_, { key }) => setExpandedKey(key);

然后在渲染 AntD 表时传递这些变量

<Table
  columns={columns}
  expandable={{
    expandedRowRender: (record) => (
      <p style={{ margin: 0 }}>{record.description}</p>
    ),
    onExpand: onExpand,
    expandedRowKeys: [expandedKey]
  }}
  dataSource={data}
/>

现场示例：https ://codesandbox.io/s/eloquent-http-jxf1m?file=/src/App.js

编辑

要使其在单击_图标时关闭（当它打开时），请将onExpand方法更改为：

const onExpand = (_, { key }) =>
    expandedKey === key ? setExpandedKey(null) : setExpandedKey(key);
于 2021-04-28T08:08:43.750 回答