antd - 如何通过单击按钮扩展 Antd 表格行

Question

版本3.0.3

环境个人电脑， Chrome

转载链接 https://codesandbox.io/s/my02ok19wy

重现步骤现在，Table 可以通过两种方式扩展行:

1. 在第一列使用图标
2. 单击整行并将 expandRowByClick 设置为 true。

但那些不是我想要的。我想使用其他列中的按钮，可能是 Show More 按钮。然后，当我单击 Show More 时，该行将展开。如何实现？

如演示所示，我想通过单击 Show More 来展开行，而不是单击第一个单元格中的按钮。谢谢

期望什么？单击不在第一个单元格中的一个按钮展开一行

实际发生了什么？必须单击该行第一个单元格中的按钮。按钮不能移动到其他单元格。

Answer 1

这是可能的，但我不想为您编写代码，但我会解释如何做。

有个 Prop 叫expandedRowKeys您可以在其中指定要扩展的行的键。

所以添加expandedRowKeys={[1,3]}至 <Table />将展开第一行和第三行。

现在，您只需要实现 handleClickMore操作行键数组的函数。以及类似的东西

expandedRowKeys={this.state.expandedKeys}