如何实现父组件与子组件的数据表格回显选中状态
问题描述
父组件需要将数据表格传给子组件，子组件根据父组件的数据表格回显选中状态。然而，父组件和子组件的数据表格id不同，并且某些字段的值可能相同。如何根据不同的产品名称、型号或品牌等字段在不匹配id的情况下实现回显？
解决方案
为了实现回显选中状态，需要在子组件中进行以下处理：
- 在mounted钩子函数中获取父组件传来的数据。
- 遍历父组件的数据，提取唯一标识符（例如：产品id）。
- 将提取到的唯一标识符添加到子组件的selectedrowkeys中。
这样，子组件的数据表格就会根据父组件选中的数据自动选中对应的行。
代码示例
props: ['listdata', 'contractid'],
mounted() {
this.getdata();
// 父组件选中的数据
this.listdata.foreach(element => {
// 唯一标识是产品id
if (element.productid) {
this.selectedrowkeys.push(element.productid);
}
});
},如果无法使用唯一标识符，也可以嘗試使用其他字段进行匹配。例如：
props: ['listData', 'contractId'],
mounted() {
this.getData();
// 父组件选中的数据
// 使用产品名称、型号、品牌等字段匹配
this.listData.forEach(element => {
let index = this.data.findIndex(item => {
return item.productName === element.productName
&& item.model === element.model
&& item.brand === element.brand;
});
if (index !== -1) {
this.selectedRowKeys.push(this.data[index].id);
}
});
}, 
