el-checkbox-group需要的参数是数组 但是后端返回的是数组包对象的数据

image.png

我们点击后checkBox后只会传中文到v-model的数组里面

image.png

//html
<el-checkbox-group v-model="checkBoxCheckedList" >
            <el-checkbox v-for="item in nengYuanOption" :key="item.dictCode" :label="item.dictLabel"></el-checkbox>
          </el-checkbox-group>

后端根据id查询返回的数据（查询出来的对象中的一个数组 然后数组里面又包了对象）arrList

arrList：[ { "energyId": 1, "energyTypeName": "水" }, { "energyId": 2, "energyTypeName": "电" }, { "energyId": 3, "energyTypeName": "燃气" }, { "energyId": 4, "energyTypeName": "蒸气" }, { "energyId": 5, "energyTypeName": "热" }, { "energyId": 6, "energyTypeName": "冷" } ]
        
    let check=[]
     arrList.forEach(item => {
      check.push(item.energyTypeName)
    });
    this.checkBoxCheckedList=check
    console.log('回显要用的数据------------');
    console.log(this.checkBoxCheckedList);

image.png

然后把checkBoxCheckedList v-model到el-checkbox-group上就回显成功了

image.png

this.customerMeasureInfo.energyTypeList就是上面演示的arrList

data{
return{
form:{
type:[],
xxx:xxx,
.....
}
checkBoxCheckedList:[],//回显checkBox的值
nenYuanOptionL:[],//接口字典 dictLabel dictCode ↓↓↓
//[ { "dictCode": 1, "dictLabel": "水" }, { "dictCode": 2, "dictLabel ": "电" }, { "dictCode": 3, "dictLabel ": "燃气" }, { "dictCode": 4, "dictLabel ": "蒸气" }, { "dictCode": 5, "dictLabel ": "热" }, { "dictCode": 6, "dictLabel ": "冷" } ]
  }
}，
watch: {
      checkBoxCheckedList(newVal){
        // console.log(newVal);
        var newEnergyTypeList=[]
            newVal.forEach(newValItem=>{
             this.customerMeasureInfo.energyTypeList.forEach(item=>{ 
              if(newValItem==item.energyTypeName){
                newEnergyTypeList.push({energyTypeName:newValItem,energyId:item.energyId},)
              }
             })
            })
              console.log('传递给后端的checkList-------');
              console.log(newEnergyTypeList);
              // this.form.type=newEnergyTypeList
      },
}

这样就跟后端当时返回的数据格式一样了

image.png