因为antd可展开表格可能存在数据污染的问题,最好的解决办法是只显示当前展开行,网上现在还没有类似的demo,折腾了一早上终于整出来了,心酸打工人
以下配置对可展开表格和嵌套表格均适用,嵌套表格放在父表里
<Table
className="components-table-demo-nested"
columns={fatherColumns}
expandable={{ expandedRowRender }} //这里的函数要在render中用const声明,做展开行数据处理
expandedRowKeys={this.state.expandedRowKeys}//默认无展开时值为[],有展开时值为[key]
defaultExpandAllRows={true}
expandedRowRender={expandedRowRender}
onExpand={(expanded, record) => this.changeRowsKey(expanded, record)}//点击展开时重新赋值Rowskey
dataSource={data}
/>
changeRowsKey(expanded, record) {
let temp = []
if (expanded) {
temp.push(record.key)
}
this.setState({
expandedRowKeys: temp
})
}