elementui复选框组使用与遇到的问题

今天有个弹出窗编辑的时候elementui的复选框出了问题，控制台也没有报错，但就是死活选不中，解决后决定写一遍文章描述一下复选框的用法，以及这个问题是怎么导致的。

1、复选框组使用

// deviceDialogFormData.config默认为['0']
<el-checkbox-group v-model="deviceDialogFormData.config" @change="handleCheckedChange">
	<el-checkbox :label="'0'" disabled>小明</el-checkbox>
	<el-checkbox :label="'1'">小红</el-checkbox>
	<el-checkbox :label="'2'">小张</el-checkbox>
</el-checkbox-group>

复选框值改变事件的方法

// value复选框组的选中值组成的数组
handleCheckedChange(value) {
  let checkedCount = value.length;
}

2、默认值的设置

复选框组的选中值以数组形式返回，所以默认值也必须设置为数组。

deviceDialogFormData.config = ['0']

3、遇到的问题

新增与编辑用的是同一个组件，但是新增的复选框组没有问题，编辑时复选框组却点了没反应。
随后在handleCheckedChange方法中打印，点击“小红”，发现数组选中值也没有改变，但是仍然出发了事件，这就很奇怪了。

// value复选框组的选中值组成的数组
handleCheckedChange(value) {
	console.log(value); // 点击选中小红打印选中的值结果依然为['1']，正常情况下应该为['1','2']
  let checkedCount = value.length;
}

随后检查代码，发现是在传值时对象写法问题。因为使用的表单，所以是进行了表单数据绑定的，deviceDialogFormData对象绑定了表单，deviceDialogFormData.config则对应选中的复选框数据，但是因为在编辑时赋值写法问题，所以导致无法正常操作。

复选框组所在的表单行的html标签代码：

            <el-form-item label="设备配置" prop="config" style="text-align: left;">
              <el-checkbox
              :indeterminate="isIndeterminate"
              v-model="checkAll"
              @change="handleCheckAllChange">全选</el-checkbox>
              <el-checkbox-group v-model="deviceDialogFormData.config" @change="handleCheckedChange">
                <el-checkbox :label="'0'" disabled>小明</el-checkbox>
                <el-checkbox :label="'1'">小红</el-checkbox>
                <el-checkbox :label="'2'">小张</el-checkbox>
              </el-checkbox-group>
            </el-form-item>

3.1、导致问题的写法

赋值创建对象字面量对象之后再给config赋值。

this.deviceDialogFormData = {
	// 其它属性值的赋值略
}
this.deviceDialogFormData.config = data.config.split(",");

3.2、正常可以使用的写法

赋值创建对象字面量对象时时就将config写进去。

this.deviceDialogFormData = {
	// 其它属性值的赋值略
  config: data.config.split(",")
}

4、事件冒泡的问题

elementui的复选框如果需要阻止事件冒泡，最好在外卖加一层div，把事件绑定到该div上。

<div class="tim" id="tim" v-for="(fileName, index) in nowPhotoArr" :key="fileName" @click.stop="openPhotoDetails(fileName, index)">
          <div class="checkbox"  v-on:click.stop="">
            <el-checkbox :label="fileName"></el-checkbox>
          </div>
          <img class="img" :src="playPath + fileName">
          <p class="name">{{fileName}}</p>
        </div>

详细情况参考这篇文章
https://blog.csdn.net/weixin_44849078/article/details/89406583