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, [])
      }
    }