父组件与子组件数据表格：实现选中状态精准回显
本文讲解如何精确回显父组件和子组件数据表格的选中状态。场景：父组件是一个弹窗，包含数据表格；子组件也包含数据表格，需根据父组件数据回显选中状态。难点：父组件和子组件表格数据的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函数和匹配字段。 确保选择的字段组合能唯一标识数据记录，避免错误选中。
以上就是父组件和子组件数据表格如何实现选中状态的精准回显？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/177119.html
微信扫一扫 
支付宝扫一扫 
