element-ui form表单中的复选框无法点击选中 （解决）

问题描述：

在做修改功能时，表单中有回显数据，这个时候回显的复选框无法点击（点击没反应无法选中）。

<el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-width="100px" class="demo-ruleForm">
      <el-form-item label="用户名：" prop="name">
        <el-input v-model="ruleForm.name" type="text" :disabled="!isAdd" />
      </el-form-item>
      <el-form-item label="密码：" prop="password">
        <el-input v-model="ruleForm.password" type="password" />
      </el-form-item>
      <el-form-item label="邮箱：" prop="email">
        <el-input v-model="ruleForm.email" type="text" />
      </el-form-item>
      <el-form-item label="权限：">
        <el-checkbox-group v-model="ruleForm.rolesCheckBox">
          <el-checkbox v-for="item in rolesName" :key="item.id" :label="item.name" name="type" />
        </el-checkbox-group>
      </el-form-item>

。。。

changeDataVis() { // 数据回显转换
      const od = this.rolesName
      const cd = this.ruleForm.roles.split(',')
      const array = []
      cd.forEach(item => {
        for (let i = 0; i < od.length; i++) {
          if (item === od[i].value) {
            array.push(od[i].name)
          }
        }
      })
      this.ruleForm.rolesCheckBox = array
    }
。。。。

解决办法：

问题出在给绑定的值赋值的时候，改为一下赋值方式就好了。

this.$set(this.ruleForm, 'rolesCheckBox', array)

这个时候需要用vue的set向响应式赋值。