父子组件数据表格选中状态精准回显技巧

本文介绍了如何在父组件弹窗和子组件数据表格中实现选中状态的精准回显。由于父、子组件表格数据ID字段不一致，文章重点讲解了如何根据产品名称、型号、品牌等其他字段进行匹配，从而精确控制子组件表格的选中行。通过改进子组件的`mounted`生命周期函数，结合`forEach`和`find`方法，以及自定义匹配函数`matchData`，最终实现了即使ID不同也能精准回显选中状态的功能，有效解决了父组件数据传递到子组件后选中状态无法正确显示的问题。 文章还提供了详细的代码示例和应对非唯一标识字段的解决方案，帮助开发者快速解决父子组件数据表格选中状态回显难题。

父组件与子组件数据表格：实现选中状态精准回显

本文讲解如何精确回显父组件和子组件数据表格的选中状态。场景：父组件是一个弹窗，包含数据表格；子组件也包含数据表格，需根据父组件数据回显选中状态。难点：父组件和子组件表格数据的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函数和匹配字段。 确保选择的字段组合能唯一标识数据记录，避免错误选中。

理论要掌握，实操不能落！以上关于《父子组件数据表格选中状态精准回显技巧》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！