解决el-checkbox传值编辑回显问题。

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是字符串,传进去的值必须是字符传。

你可能感兴趣的:(前端,vue,element-ui,javascript,vue.js)