解决el-checkbox传值编辑回显问题。_el-checkbox 回显-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43871703/article/details/109096557

本文介绍了如何将Element UI的复选框组案例中的中文参数改为ID，以适应实际工作中以ID入库的需求。通过在`el-checkbox`标签内使用`v-for`循环遍历城市对象，并结合`label`和`value`属性，实现了以ID作为数据绑定。在编辑模式下，可以从后端获取ID数组，直接赋值给`v-model`，确保数据类型一致。此方法有助于提高代码的灵活性和实用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element的官方案例中都是以中文传递参数，而我们在实际的工作中经常以id入库，所以写了一个小demo讲解一下。
官方案例：

<el-checkbox-group v-model="checkList">
    <el-checkbox label="复选框 A"></el-checkbox>
    <el-checkbox label="复选框 B"></el-checkbox>
    <el-checkbox label="复选框 C"></el-checkbox>
    <el-checkbox label="禁用" disabled></el-checkbox>
    <el-checkbox label="选中且禁用" disabled></el-checkbox>
  </el-checkbox-group>


//data 里面
   data () {
      return {
      //以中文传值
        checkList: ['选中且禁用','复选框 A']
      };
    }

改成传id等标识

**label是展示在外的text内容.**如果el-checkbox标签之间不写任何内容显示也是label的内容，但是我们在el-checkbox标签里面加上{{}}name的值。这个其实就是显示的内容。

<el-checkbox-group v-model="value" >
      <el-checkbox v-for="city in cities" :label="city.id" :key="city.id">{{city.name}}</el-checkbox>
</el-checkbox-group>

data() {
	return {
		value: [],
		cities: [{name:'北京'，id:'1'}, {name:'武汉'，id:'2'},{name:'深圳'，id:'3'}];
	}
};

编辑的时候只需要把从后端读取的id传入数组即可
假设是一个数组
tempArr ：[‘1’,‘2’]
把当前数组绑定v-model的值重新赋值
this.value = tempArr 即可或者结构写法 this.value.push(…value)；
注意：保证两边的数据类型是一样的，即原数组里面的value是字符串，传进去的值必须是字符传。