关于element-UI复选框返回集合类型

上传选中的复选框
效果

代码

 <!-- 添加或修改产品二级信息对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">

                <el-form-item label="尺寸" prop="proNewSizeList">
                    <el-checkbox-group v-model="checked" @change="test">
                        <el-checkbox v-for="item in checkList" :key="item.id" :label="item.id">{{ item.label }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>

//data数据
 			checked: [],
            checkList: [
                { id: 1, label: 'XS' },
                { id: 2, label: 'S' },
                { id: 3, label: 'M' },
                { id: 4, label: 'L' },
                { id: 5, label: 'XL' },
                { id: 6, label: 'XXL' },
            ],
//methods
methods: {
        test(val) {
            let label = []
            this.checked = val;
            this.checkList.forEach(item => {
                this.checked.forEach(j => {
                    if (item.id == j) {
                        // console.log(item.label);
                        label.push({ size: item.label })
                        // label.push(item.label)
                    }

                })

            })
            console.log(label)
            this.form.sizeList = label //提交数据 "sizeList": [ { size: item.label } ]
            this.$forceUpdate()
        } ,
        
 }

回显选中的复选框

后台数据格式

"rows": [
    {
      "createBy": "",
      "createTime": "2023-05-23 14:25:52",
      "updateBy": "",
      "updateTime": "2023-05-23 17:21:44",
      "remark": null,
      "id": 8,
      "templateId": 5,
      "templateSecondryId": 44,
      "newTime": "2023-05-23",
      "newChannel": "0",
      "isDelete": 0,
      "productNo": "1",
      "colorProperty": "1",
      "proNewSizeList": [ //这是关键数据
        {
          "createBy": "",
          "createTime": "2023-05-23 17:21:44",
          "updateBy": "",
          "updateTime": null,
          "remark": null,
          "id": 26,
          "proNewId": 8,
          "size": "XS",  //这是关键数据
          "isDelete": 0
        },
        {
          "createBy": "",
          "createTime": "2023-05-23 17:21:44",
          "updateBy": "",
          "updateTime": null,
          "remark": null,
          "id": 27,
          "proNewId": 8,
          "size": "S",//这是关键数据
          "isDelete": 0
        },
        {
          "createBy": "",
          "createTime": "2023-05-23 17:21:44",
          "updateBy": "",
          "updateTime": null,
          "remark": null,
          "id": 28,
          "proNewId": 8,
          "size": "L",//这是关键数据
          "isDelete": 0
        }
      ]
    }
   ]

代码

 <!-- 添加或修改产品二级信息对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">

                <el-form-item label="尺寸" prop="proNewSizeList">
                    <el-checkbox-group v-model="checked" @change="test">
                        <el-checkbox v-for="item in checkList" :key="item.id" :label="item.id">{{ item.label }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
  //data数据
 			checked: [],
            checkList: [
                { id: 1, label: 'XS' },
                { id: 2, label: 'S' },
                { id: 3, label: 'M' },
                { id: 4, label: 'L' },
                { id: 5, label: 'XL' },
                { id: 6, label: 'XXL' },
            ],
//methods 
/** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const id = row.id || this.ids
            getNew(id).then(response => {
                this.form = response.data;
                if (response.data.proNewSizeList && response.data.proNewSizeList.length > 0) {
                    let val = response.data.proNewSizeList.map(item => {
                        return item.size
                    })
                    let m = []
                    for (let i = 0; i < val.length; i++) {
                        this.checkList.forEach(item => {
                            if (val[i] == item.label) {
                                m.push(item.id)
                            }
                        })
                    }

                    console.log(JSON.stringify(m));
                    this.checked = m
                }

                this.open = true;
                this.title = "修改产品上新";
            });
        },