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="width: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

然后根據自己的實際需求作了一些改動。