
如何在不同的 id 值的情况下匹配父级和子级数据表格的选中状态
父级组件和子级组件的数据表格匹配选中状态时,需要确保它们使用相同的唯一标识符。在本例中,父级组件使用 productid 作为唯一标识符,而子级组件使用 id。
解决不同 id 值的匹配问题
由于父级和子级组件使用不同的 id 值,需要对数据进行预处理,以便将它们的唯一标识符对齐。
在子级组件的 mounted() 生命周期钩子中,需要遍历父级组件传递的 listdata 数据,并检查 productid 是否存在。如果存在,则将其分配给 id 属性,以保证与选中的 productid 一致。
匹配字段时的考虑
除了使用唯一标识符外,还可以考虑使用其他字段来匹配数据的选中状态,例如产品名称、型号或品牌。然而,需要确保这些字段的值是唯一的或具有足够高的区分度,以防止错误匹配。
修改后的代码
修改后的子级组件 mounted() 生命周期钩子如下所示:
props: ['listData', 'contractId'],
mounted() {
this.getData();
// 遍历父组件选中的数据
this.listData.forEach(element => {
// 如果存在产品ID,将其分配给id属性,以保证与选中的productId一致
if (element.productId) {
element.id = element.productId;
}
});
this.selectDatas = this.listData.filter(item => item.id != undefined);
// 父组件选中的数据
this.listData.forEach(element =youjiankuohaophpcn {
// 如果数据中有id,则将其添加到selectedRowKeys数组中
if (element.id) {
this.selectedRowKeys.push(element.id);
}
});
}通过这些修改,子级组件中的数据表格可以成功匹配父级组件传递的选中状态,即使父级和子级组件使用不同的唯一标识符。










