element-UI根据后台数据动态生成el-checkbox-group，点击保存获取绑定的checked项(二维数组)

我的效果图如下：

<template>
  <div class="mcontainer">
    <el-form :model="formApp" ref="formApp" :rules="rules">
      <el-form-item label="APP选择" :label-width="formLabelWidth" prop="appCode">
        <el-select style="100%;"
          v-model="formApp.appCode"
          multiple
          :disabled="type == 'add'?false : true"
          placeholder="请选择"
          @change="changeType">
          <el-option
            v-for="item in selList"
            :key="item.code"
            :label="item.name"
            :value="item.code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属分类" :label-width="formLabelWidth">
        <div v-show="typeList.length > 0" class="check-box" v-for="(item, index) in typeList">
          <span class="app-name">
            <el-tag>{{ item.appName }}</el-tag>
          </span>
          <el-checkbox-group v-model="checkedEquipments[index]">
            <el-checkbox
              @change="handleChange(type,index,item)"
              v-for="(type, i) in item.types"
              :disabled="i == 0? true : false"
              :key="type.id"
              :label="type.id">{{type.name}}</el-checkbox>
          </el-checkbox-group>
        </div>
        <div v-show="typeList.length == 0" class="no-typelist">请先选择APP</div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'CollectOrder',
  components: { CollectRecord },
  data() {
    return {
      formLabelWidth: '80px',
      /*随意修改后的checked项,
      * 因为是二维数组,我的第一个类「全部」默认的ID是0,如果没有全部,不需要0,直接这样子就可以[[],[],[],[],[]]
      * 我默认显示了5个,具体几个会根据app的选择值来重新计算,如果一个APP,就一级,2个APP,就2组,
      * ******************************** */
      checkedEquipments: [[0],[0],[0],[0],[0]], 
      checkEquipArr: [],   // 传给后台的二维数组,根据自己要返回给后台的格式重组过的
      formApp: {
        appCode: [],
        appTypeIds: [],//马甲及分类列表
      },
      type: 'add',
      allType: [], //获取的所有类别
      typeList: [],
    }
      //我得到的类别数据是一个二维数据，如下
      // [
      //   {
      //     appCode: "MoneyHome", 
      //     appName: "MoneyHome", 
      //     types: [
      //       {id: 21, name: "第二个app--分类一"}
      //     ]
      //   },
      //   {
      //     appCode: "RupeeHome",
      //     appName: "RupeeHome",
      //     types: [
      //       {id: 20, name: "aaa"}, 
      //       {id: 22, name: "q"}
      //     ]
      //   }
      // ]
  },
  methods: {
    //APPP选择的时候，类别也做相应的改变
    changeType(val) {
      //类别的数组占位,app选择几个,就会有几组类别
      this.checkedEquipments = [];//因为默认的有5组,所以要重新清掉了,根据选择几组来确定
      val.forEach((item,index) => {
        if(index <= val.length) {
          this.checkedEquipments.push([0]);
        }
      });
      console.log('this.checkedEquipments---', this.checkedEquipments);
      this.typeList = [];
      //this.allType是我能过接口返回的所有的类，存在这里了，换成自己相应的变量就好
      let list = Object.assign([],this.allType);
      //这一步是为了给每一类组数加一个"全部"，如果没有这个需求，就不需这步了
      let obj = {
        id: 0,
        name: '全部',
      };
      list.forEach(item => {
        //每个类别要加上全部
        if(item.types.length > 0){
          if(item.types[0].name != '全部'){
            item.types.unshift(obj);
          }
        }else {
          item.types.unshift(obj);
        }
        val.forEach(name => {
          if(item.appCode == name){
            this.typeList.push(item);
          }
        });
      });
    },
    //创建保存时的二维数组
    handleChange (data, index, item) {
      this.checkEquipArr = [];
      let arr = this.checkedEquipments;
      for (let i = 0; i < arr.length; i ++) {
        let equipment = arr[i];
        if (equipment.length > 0) {
          let obj = {
            appCode: this.typeList[i].appCode,
            typeIds: []
          }
          for (let j = 0; j < equipment.length; j++) {
            obj.typeIds.push(equipment[j])
          }
          this.checkEquipArr.push(obj);
        }
      }
      console.log("QERQWER00000====",this.checkEquipArr);
      //重组后我传给后台的二维数组,可以适当根据自己的需求调整格式和字段
      // [
      //   {
      //     appCode: "MoneyHome",
      //     typeIds: [0, 21],
      //   },
      //   {
      //     appCode: "RupeeHome",
      //     typeIds: [0, 20, 22]
      //   }
      // ]
    },
  },
};
</script>

参考了这篇文章：https://www.cnblogs.com/wjunwei/p/9531322.html

然后根据自己的实际需求作了一些改动。