element ui中Checkbox的动态渲染

今天做一个vue的多项选择效果，引入了element ui中的checkbox插件，使用的是它的多选框组的ui插件，其中这些checkbox是通过后台返回数据动态进行渲染，在渲染的过程中遇见了一些很不正常的交互效果，要么是所有的checkbox都选中了，取消一个checkbox选中状态就少一个checkbox，要么是选中一个checkbox，就会自动生成一个新的checkbox，搞得我晕头转向，后来经排查，原来是多选框组中v-model搞的鬼，也可能是我理解的不到位导致的，这里我做个解释：

<el-checkbox-group v-model="queryCheckList" class="checkbox_css" @change="changeCheckbox">
<el-checkbox :label="item" v-for="item in checkList"></el-checkbox>
</el-checkbox-group>

以上是我的正确代码，官方文档代码如下：

<template> <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> </template> <script> export default { data () { return { checkList: ['选中且禁用','复选框 A'] }; } }; </script>

从范例中看出checkList和每一个el-checkbox中的lable是有关联的，于是我就在处理动态数据的时候还原案例里的数据关系，但发现按照案例走，会出现上述我说的那两种不正常的现象，下面是当时出现不正常现象的代码

<el-checkbox-group v-model="checkList" class="checkbox_css" @change="changeCheckbox">
<el-checkbox :label="item" v-for="item in checkList"></el-checkbox>
</el-checkbox-group>

于是我开始找问题，发现checkList其实和每一个el-checkbox中的lable是可以分开处理的，就是v-model绑定的变量和label循环的时候所用的数组变量可以不是同一个，这样就可以完美解决上述那些不正常的现象，然后在点击checkbox时候触发change事件，去给queryCheckList赋值即可

changeCheckbox(data) {
this.queryCheckList = data;
},