复选框全选 分组全选 element ui 组件

<h4>
            <!-- 全选 -->
            <el-checkbox
              :indeterminate="indeterminate"
              v-model="CheckAll"
              @change="handleCheckAllChange"
              class="titleBox"
              >全选</el-checkbox
            >
          </h4>
          <div class="sketch_content">
            <div
              v-for="(groupItem, groupIndex) in allData"
              :key="groupItem.id"
              style="margin: 10px 0"
            >
              <el-divider></el-divider>
              <el-checkbox
                class="allBox"
                v-model="checkedArr[groupIndex]"
                @change="groupAllChange(groupIndex)"
                >{{ groupItem.name }}</el-checkbox
              >
              <div style="margin: 5px 0 0 30px">
                <el-checkbox
                  v-for="(item, index) in groupItem.vocspecies"
                  :label="item.name"
                  :key="item.id"
                  v-model="checkedBtn[groupIndex][index]"
                  @change="groupBtnChange(groupIndex)"
                  >{{ item.name }}</el-checkbox
                >
              </div>
            </div>

handleCheckAllChange() {
      // 1. 全选控制分组全选
      for (let i = 0; i < this.checkedArr.length; i++) {
        this.checkedArr[i] = this.CheckAll;
        // 2. 全选控制分组小选全选
        for (let j = 0; j < this.checkedBtn[i].length; j++) {
          this.checkedBtn[i][j] = this.CheckAll;
        }
      }
    },
    groupAllChange(index) {
      // 1. 分组全选控制小选
      //判断分组现在状态 循环对应的子节点 把每一项改为和分组全选相同状态
      let tag = this.checkedArr[index];
      for (let i = 0; i < this.checkedBtn[index].length; i++) {
        this.checkedBtn[index][i] = tag;
      }
      // 2. 分组全选控制全选
      this.CheckAll = this.checkedArr.every((item) => item === true);
    },
    // 小选控制全选
    groupBtnChange(index) {
      // 1. 小选控制分组全选
      let tag = this.checkedBtn[index].every((item) => item === true);
      this.checkedArr[index] = tag;
      // 2. 小选控制全选
      this.CheckAll = this.judge();
    },
    // 判断所有小选的选中情况
    judge() {
      for (let i = 0; i < this.checkedBtn.length; i++) {
        for (let j = 0; j < this.checkedBtn[i].length; j++) {
          if (this.checkedBtn[i][j] === false) {
            return false;
          }
        }
      }
      return true;
    },
 // 取消按钮
    cancel() {
      this.CheckAll = false;
      // 处理分组全选数据
      let arr1 = new Array(this.allData.length).fill(false); //准备分组全选数组和单个状态的数组
      this.checkedArr = arr1;
      // 处理分组小选数据
      let arr2 = [];
      this.allData.forEach((item) => {
        let child = new Array(item.vocspecies.length).fill(false);
        arr2.push(child);
      });
      this.checkedBtn = arr2;
    },