如何匹配父组件与子组件的数据表格以实现选中状态回显?
如何将父组件传来的数据表格和子组件的表格数据匹配,用于回显选中的状态?下面这个是父组件,是个弹窗下面这个是子组件
点击选择清单的时候出现子组件弹窗,就是吧父组件显示的这个数据传给子组件,子组件接收后和子组件里面的表格匹配,有的话就回显父组件显示的那条数据
这个是父组件引入了子组件
<a-modal
:destroyOnClose="true"
:maskClosable="false"
width="1000px"
title="选择采购设备"
:visible="Procurement"
@cancel="ProcurementOfEquipmentCancel"
:footer="null"
>
<SelectContractMaterial
:listData="data"
:contractId="contractId"
@callback="selectContractMaterialCallback"
@closeVisible="ProcurementOfEquipmentCancel"
></SelectContractMaterial>
</a-modal>
:listData="data" data就是父组件显示的表格数据
下面是子组件接收和mounted。这个项目是刚接手的感觉是这些代码去做的回显
<a-table
:row-selection="{ selectedRowKeys: selectedRowKeys, onSelect: onSelectChange, onSelectAll:onSelectAll, columnTitle:' ' }"
:customRow="
record => {
return {
on: {
click: event => onRowClick(record)
}
};
}
"
:scroll="{ x: 1500, y: 300 }"
:pagination="pagination"
rowKey="id"
:columns="columns"
:data-source="data"
>
</a-table>
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都是不一样,请问这样的话应该怎么处理呢,要是按照产品名称,型号,品牌这些字段去匹配呢?这些字段的值有的是相同的,这样应该怎么去写呢,求回答!求回答!
尝试使用那些字段去拿好像不太对劲
回复
1个回答

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

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容