父组件与子组件数据表格ID不一致，如何实现选中状态回显？

如何实现父组件与子组件的数据表格回显选中状态

问题描述

父组件需要将数据表格传给子组件，子组件根据父组件的数据表格回显选中状态。然而，父组件和子组件的数据表格id不同，并且某些字段的值可能相同。如何根据不同的产品名称、型号或品牌等字段在不匹配id的情况下实现回显？

解决方案

为了实现回显选中状态，需要在子组件中进行以下处理：

1. 在mounted钩子函数中获取父组件传来的数据。
2. 遍历父组件的数据，提取唯一标识符（例如：产品id）。
3. 将提取到的唯一标识符添加到子组件的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);
    }
  });
},

以上就是父组件与子组件数据表格ID不一致，如何实现选中状态回显？的详细内容，更多请关注硕下网其它相关文章！