父组件与子组件数据表格：实现选中状态精准回显
本文讲解如何精确回显父组件和子组件数据表格的选中状态。场景：父组件是一个弹窗，包含数据表格；子组件也包含数据表格，需根据父组件数据回显选中状态。难点：父组件和子组件表格数据的ID字段不一致，需根据其他字段（例如产品名称、型号、品牌）匹配。
父组件通过:listdata属性向子组件传递数据。子组件接收数据后，需与自身表格数据匹配，并更新选中状态。示例代码中，子组件使用a-table组件，通过selectedrowkeys属性控制选中行。
原代码中，子组件的mounted生命周期函数尝试直接将父组件数据的ID添加到selectedrowkeys，但因ID字段不一致导致错误。正确方法是根据父组件数据中的其他唯一标识字段（例如productid）与子组件数据匹配，设置selectedrowkeys。
改进后的子组件mounted函数：
props: ['listdata', 'contractid'],
mounted() {
this.getdata();
this.listdata.forEach(element => {
// 使用productid作为唯一标识，若不存在，请替换为其他唯一标识字段
if (element.productid) {
this.selectedrowkeys.push(element.productid);
}
});
},
代码遍历父组件传递的listdata，检查每个数据项是否存在productid。存在则将其添加到selectedrowkeys数组。 只有匹配的数据行才会被选中。如果productid并非唯一标识，请替换为子组件数据中唯一标识每条记录的字段。
处理非唯一标识字段的匹配：
如果productid仍然无法唯一标识，需根据产品名称、型号、品牌等多个字段匹配。 可以使用自定义函数：
function matchData(parentItem, childItem) {
return parentItem.productName === childItem.productName &&
parentItem.model === childItem.model &&
parentItem.brand === childItem.brand;
}
然后在mounted函数中使用该函数：
mounted() {
this.getData();
this.listData.forEach(parentItem => {
const matchedItem = this.selectDatas.find(childItem => matchData(parentItem, childItem));
if (matchedItem && matchedItem.id) {
this.selectedRowKeys.push(matchedItem.id);
}
});
},
代码使用find方法查找子组件数据中与父组件数据匹配的项。找到匹配项且其id存在，则将其id添加到selectedrowkeys。 需根据实际情况调整matchData函数和匹配字段。 确保选择的字段组合能唯一标识数据记录，避免错误选中。
