vue 使用element-ui的el-checkbox-group组件

场景：

选中checkbox的时候，将当前选中的数据组成数据，提交给后台

 

找了挺多的方法，后面看到说element ui 的el-checkbox-group v-model 不支持数组对象，只支持一维数组。

解决方案：

        <el-checkbox-group v-model="rulesId" class="rules-label" >
              <el-checkbox v-for="(rule,i) in rulesList" :label="rule.leavel_id" :key="rule.leavel_id" :value="rule.leavel_id" v-model="rule.isChecked" @change="val => handleChecked(val,rule)">{{rule.leavel_name}}
                <br>折扣：<el-input v-model="rule.discount" @input='discountChange(rule,i)'></el-input>
              </el-checkbox>
            </el-checkbox-group>

把change 事件写在el-checkbox @change="val => handleChecked(val,rule)"    参数val 就是checkbox 的选中状态，根据val的值去进行数组的添加和减少

  handleChecked(val,rule){
      if(val){
        this.form.rules.push(rule)
      }else{
        this.deleteItem(rule.leavel_id,this.form.rules)
      }
    },
    deleteItem (item, list) {
      for (var key in list) {
        if (list[key].leavel_id === item) {
            list.splice(key, 1)
        }
      }
    },

这几行代码，实现了这个功能，比我之前写的，简洁明了。如果大家有好的想法，欢迎交流啊