解决父组件与子组件数据表格ID不一致的选中状态回显问题
本文介绍如何解决父组件（例如弹窗）和子组件数据表格ID不同，导致选中状态无法正确回显的问题。 核心在于使用能够唯一标识数据记录的字段进行匹配，而不是直接依赖ID。
父组件通过listData属性向子组件传递数据。子组件需要根据其他字段（例如产品名称、型号、品牌等）与自身数据匹配，从而在加载时回显父组件已选择的数据。
问题根源： 原始代码可能尝试使用父组件的ID进行匹配，但由于父组件和子组件的ID字段不一致，导致匹配失败。
解决方案： 找到一个或多个字段组合，能够唯一标识数据记录。 假设productId可以唯一标识，则修改子组件的mounted生命周期钩子：
props: ['listData', 'contractId'],
mounted() {
this.getData();
// 遍历父组件传递的数据
this.listData.forEach(item => {
// 使用productId进行匹配
if (item.productId) {
this.selectedRowKeys.push(item.productId);
}
});
},
这段代码遍历listData，如果item包含productId，则将其添加到selectedRowKeys数组中，该数组控制表格的选中行。
如果productId不是唯一标识符： 需要根据实际情况选择其他能够唯一标识记录的字段组合。例如，可以组合“产品名称”、“型号”和“品牌”等字段，创建一个唯一键进行匹配。 例如：
mounted() {
this.getData();
this.listData.forEach(item => {
const uniqueKey = this.generateUniqueKey(item.productName, item.model, item.brand);
if (uniqueKey) {
this.selectedRowKeys.push(uniqueKey);
}
});
},
methods: {
generateUniqueKey(productName, model, brand) {
// 根据实际情况修改唯一键的生成逻辑
return `${productName}-${model}-${brand}`;
}
}
通过生成唯一键，即使父组件和子组件的ID不同，也能实现选中状态的正确回显。 记住根据你的数据结构调整generateUniqueKey函数的逻辑，确保生成的键是唯一的。
通过以上方法，即使父组件和子组件的数据表格ID不同，也能有效地实现选中状态的回显。
