如何匹配父组件与子组件的数据表格以实现选中状态回显?-灵析社区

老詹啊老詹

如何将父组件传来的数据表格和子组件的表格数据匹配,用于回显选中的状态? 下面这个是父组件,是个弹窗 ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241005/83b393acf14acb3f037344b204551653.png) 下面这个是子组件 ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241005/3bfbd1d1f1abb70e506b50c71c399213.png) 点击选择清单的时候出现子组件弹窗,就是吧父组件显示的这个数据传给子组件,子组件接收后和子组件里面的表格匹配,有的话就回显父组件显示的那条数据 这个是父组件引入了子组件 :listData="data" data就是父组件显示的表格数据 ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241005/52440ad5924e03fac503e7fecb606492.png) 下面是子组件接收和mounted。这个项目是刚接手的 感觉是![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241005/a736671824b543e7b1b66e29f8d52999.png)这些代码去做的回显 { return { on: { click: event => onRowClick(record) } }; } " :scroll="{ x: 1500, y: 300 }" :pagination="pagination" rowKey="id" :columns="columns" :data-source="data" > props: ['listData', 'contractId'], mounted() { this.getData(); let newData = JSON.parse(JSON.stringify(this.listData)); newData.forEach(item => { if (item.productId) { item.id = item.productId } }) this.selectDatas = newData.filter(item => item.id != undefined); newData.forEach(element => { if (element.id) { this.selectedRowKeys.push(element.id); } }); }, 而且父组件传过来的id和子组件显示的表格数据id都是不一样,请问这样的话应该怎么处理呢,要是按照产品名称,型号,品牌这些字段去匹配呢?这些字段的值有的是相同的,这样应该怎么去写呢,求回答!求回答! 尝试使用那些字段去拿好像不太对劲

阅读量:187

点赞量:0

问AI
props: ['listData', 'contractId'], mounted() { this.getData(); // 父组件选中的数据 this.listData.forEach(element => { // 唯一标识是产品id if (element.productId) { this.selectedRowKeys.push(element.productId); } }); },