element-UI,根据后台数据、动态生成el-checkbox-group，点击提交获取绑定checked项以及实现显示默认checked项

<template>
  <div id="Demo">
    <el-form ref="form" label-width="100px">
      <el-form-item label="设备名称">
       <div class="check-group" v-for="(item, index) in equipments" :key="index">
          <el-tag>{{item.menu}}</el-tag>
          <el-checkbox-group v-model="checkedEquipments[index]" @change="handleChange(item.id)"> {{checkedEquipments[index]}} <el-checkbox v-for="data in item.childMenu" :label="data.id" :key="data.menu"> {{data.menu}} </el-checkbox>
          </el-checkbox-group>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
export default { data() { return { checkedEquipments: [], //随意修改后的checked项（即要传到后台的变动数据）
        equipments: [   // 全部数据
 { id: '1', menu: '设备1', childMenu: [{ id: '1-1', menu: '暖通一' }, { id: '1-2', menu: '照明一' }, { id: '1-3', menu: '取暖一' }, { id: '1-4', menu: '应急一' } ] }, { id: '2', menu: '设备2', childMenu: [ { id: '2-1', menu: '暖通二' }, { id: '2-2', menu: '照明二' }, { id: '2-3', menu: '取暖二' }, { id: '2-4', menu: '应急二' } ] } ], checkEquip: [ //模拟后台获取的数据（各el-checkbox-group默认checked项）
 { id: '1', menu: '设备1', childMenu: [ { id: '1-1', menu: '暖通一' }, { id: '1-2', menu: '照明一' } ] }, { id: '2', menu: '设备2', childMenu: [] } ] }; }, methods: { handleChange () { this.checkEquipArr = [] let arr = this.checkedEquipments for (let i = 0; i < arr.length; i ++) { let equipment = arr[i] if (equipment.length > 0) { let obj = { id: this.equipments[i].id, equips: [] } for (let j = 0; j < equipment.length; j++) { obj.equips.push(equipment[j]) } this.checkEquipArr.push(obj) } } console.log(this.checkEquipArr); } }, created () { // 初始化默认选中状态
      for (let i = 0; i < this.checkEquip.length; i++) { let checkArr = [] let item = this.checkEquip[i].childMenu if (item.length === 0) { this.checkedEquipments.push([]) }else { for (let j = 0; j < item.length; j ++) { checkArr.push(item[j].id) } this.checkedEquipments.push(checkArr) } } console.log(this.checkedEquipments); } };

每一个人的数据格式不同，可是实现逻辑都是同样的。能够做为参考，稍微修改一下代码实现符合本身的数据格式。

实现结果（动态生成 checkbox-group，而且设置默认checked项），具体v-model值，须要打印看咯

 

简单点来讲：

就是根据你的数据生成一个二维数组，好比data是lists,那么就是这样写了

data() { return { lists: [你的数据], checkList: [] } } 

 

<el-checkbox-group v-for="(power, index) in lists" v-model="checkList[index]">
              <el-checkbox  v-for="power in group.powers" :key="power.id" :label="power.id">{{power.name}}</el-checkbox>
 </el-checkbox-group>

 

 created() { for (let key in this.lists) { this.$set(this.checkList, key, []) } }