Antd:是否有可能将表格行扩展器移动到其中一个单元格中?

时间:2017-10-21 20:02:00

标签: reactjs antd

我有一个antd表,其中一列中的数据可以变得非常大。当行被扩展时,我正在完整地显示这些数据但是因为具有大量数据的单元格位于屏幕的右侧,并且扩展器图标位于屏幕的左侧,所以它不是非常直观。我想要做的是在实际单元格内移动展开器图标,以便用户知道他们可以单击+来查看其余数据。

提前致谢。

2 个答案:

答案 0 :(得分:1)

是的,你可以而且你必须深入挖掘他们的文件...

根据rc-table docs,您可以使用expandIconColumnIndex作为要添加+的索引列,同时您还必须添加expandIconAsCell={false}以使其呈现为细胞。

请参阅Demo

答案 1 :(得分:0)

这是使任何列变为可消耗状态的方法。 首先将import os list = os.listdir("path") print(list) 添加到组件expandedRowKeys

state

然后,您需要添加这两个函数state = { expandedRowKeys: [], }; onExpand

updateExpandedRowKeys

这是您需要定义函数的方式,因此 在<Table id="table-container" rowKey={record => record.rowKey} className={styles['quote-summary-table']} pagination={false} onExpand={this.onExpand} expandedRowKeys={this.state.expandedRowKeys} columns={columns({ updateExpandedRowKeys: this.updateExpandedRowKeys, }) } dataSource={this.data} oldTable={false} /> 中,我们将始终拥有 更新扩展的expandedRowKeys

的值
rowKeys

最后,您需要调用函数onExpand = (expanded, record) => { this.updateExpandedRowKeys({ record }); }; updateExpandedRowKeys = ({ record }) => { const rowKey = record.rowKey; const isExpanded = this.state.expandedRowKeys.find(key => key === rowKey); let expandedRowKeys = []; if (isExpanded) { expandedRowKeys = expandedRowKeys.reduce((acc, key) => { if (key !== rowKey) acc.push(key); return acc; }, []); } else { expandedRowKeys.push(rowKey); } this.setState({ expandedRowKeys, }); } 对于您要使用展开折叠功能的任何列。 甚至可以将其实现为多列。

updateExpandedRowKeys