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

作者站长头像
站长
· 阅读数 25

如何将父组件传来的数据表格和子组件的表格数据匹配,用于回显选中的状态?下面这个是父组件,是个弹窗如何匹配父组件与子组件的数据表格以实现选中状态回显?下面这个是子组件如何匹配父组件与子组件的数据表格以实现选中状态回显?点击选择清单的时候出现子组件弹窗,就是吧父组件显示的这个数据传给子组件,子组件接收后和子组件里面的表格匹配,有的话就回显父组件显示的那条数据

这个是父组件引入了子组件
  <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个回答
avatar
test
2024-06-20
props: ['listData', 'contractId'],

mounted() {
        this.getData();
        // 父组件选中的数据
        this.listData.forEach(element => {
            // 唯一标识是产品id
            if (element.productId) {
               this.selectedRowKeys.push(element.productId);
            }
        });
    },
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容