a-table在父子表格嵌套展示时如果不进行处理,容易出现展开子表将之前已展开子表数据覆盖的问题。为了解决这一问题我们需要加一些限制条件。
在父表格a-table标签内添加:record.key应是唯一标识,不然会出现子表格无法展开的情况。
:row-key="(record) => record.key"
:expandedRowKeys="expandedRowKeys"
同时要在expand回调函数加入以下代码:
getInnerData(expanded, record) {
this.expandedRowKeys = []
// 判断是否点开
if (expanded) {
this.expandedRowKeys.push(record.key)
// 点开后执行。。。
// 先将子级表格数据清空,否则之前点开别的行的数据也会在里面
this.innerdata = [];
// 再将父级点击的那一行的数据(record)给子级数据存进去,具体情况根据自己需求更改
for(let i = 0;i <record.innerdata.length;i++){
this.innerdata.push({
key:i+1,
id : record.innerdata[i].id,
name : record.innerdata[i].name,
})
}
}
},
不要忘记给在data中添加expandedRowKeys:[]。
如何同时展开互不冲突的子表还没有实现,如果任何问题欢迎指正