Table嵌套子表格,在Table父表格操作列点击添加附件,通过可扩展expandable={{ expandedRowRender }}方法,展示添加成功的附件:
问题:添加附件成功之后,子表格展示数据无法及时更新,子表格Table里面的dataSource数据是正确的
原因:子表格Table中数据没有一个唯一对应的字段,需要对数据进行处理,加上一个唯一标识的属性,
代码中的rowKey="id"就是解决这一问题的关键。
重要代码
// 父表格Table
<Table rowKey="key" columns={dataColumns} dataSource={bulletins} expandable={{ expandedRowRender }} />
// expandedRowRender扩展子表格方法
const expandedRowRender = (record: any) => {
let attachData: any[] = [];
record?.attaches?.forEach((item:any, index:any) => {
attachData.push(Object.assign({},item,
{'id': index + 1}))
})
return (
<Table rowKey="id" columns={attachColumns} dataSource={attachData} pagination={false} bordered />
);
};