vue结合element的checkbox实现多项全选反选

方法一:

<div style="max-height: 500px; overflow-y: auto">
   <div class="spe_list_content" v-for="(item, index) in dataList" :key="index">
     <el-checkbox v-if="item.text" style="font-weight:bold" v-model="item.checked" :indeterminate="item.isIndeterminate" @change="handleCheckAllChange(item)">{{ item.text }}</el-checkbox>
     <p v-for="(listItem, index) in item.list" :key="index" style="margin-left:30px">
        <el-checkbox v-model="listItem.checked" @change="handleCheckedItemChange(item)">{{ listItem.name }}</el-checkbox>
      </p>
   </div>
</div>

// 父选项操作
    handleCheckAllChange(item) {
      let flag=item.checked
      item.list.forEach(el=>{
        el.checked=flag
      })
    },
    // 子选项操作
    handleCheckedItemChange(item) {
      // 全部选中  every-全部都选中才返回true
      item.checked=item.list.every(el=>el.checked)
      // 仅部分选中  some-有一个选中即返回true
      let flag=item.list.some(el=>el.checked)
      this.varietiesSubsidiaryArr.find(el=>item.text==el.text).isIndeterminate=flag
    },

方法二:

      <div v-for="res in resLists" :key="res.id">
        <!-- 分类 -->
        <div style="padding: 20px; background-color: #eee">
        //indeterminate---控制部分选择的变量
          <el-checkbox
            v-model="res.checked"
            :indeterminate="res.indeterminate"  
            @change="(val) => cateChange(res.id, val)"
            >{{ res.name }}</el-checkbox
          >
        </div>
        <!-- 资源 -->
        <div style="padding: 20px">
          <el-row>
            <el-col :span="8" v-for="subRes in res.children" :key="subRes.id"
              ><el-checkbox
                v-model="subRes.checked"
                @change="resChange(res.id)"
                >{{ subRes.name }}</el-checkbox
              ></el-col
            >
          </el-row>
        </div>
      </div>

 export default {
  data() {
    return {
      resLists: [], // 总的资源模块
    };
  },
  methods: {
    // 点击了总的分类按钮--实现全选反选的功能
    cateChange(id, val) {
      for (let i = 0; i < this.resLists[id].children.length; i++) {
        this.$set(this.resLists[id].children[i], "checked", val);
        this.$set(this.resLists[id], "indeterminate", false);
      }
    },
    resChange(cid) {
      let count = 0;
      for (let i = 0; i < this.resLists[cid].children.length; i++) {
        if (this.resLists[cid].children[i].checked) {
          count++;
        }
      }
      this.changeCheckbox(count, cid);
    },
    changeCheckbox(count, key) {
      // 判断当前角色选中资源列表与全部的资源列表长度进行对比
      if (count === 0) {
        // 当前分类选中状态为false
        this.$set(this.resLists[key], "checked", false);
        this.$set(this.resLists[key], "indeterminate", false);
      } else {
        // 当前选中的资源列表和全部的资源列表长度相等则状态为true
        if (count === this.resLists[key].children.length) {
          this.$set(this.resLists[key], "checked", true);
          this.$set(this.resLists[key], "indeterminate", false);
        } else {
          // 当前选中的资源列表长度小于全部资源列表的长度，部分选中状态设置为true
          this.$set(this.resLists[key], "checked", false);
          this.$set(this.resLists[key], "indeterminate", true);
        }
      }
    },
    // 保存操作
    submitFn() {
      let checkedArr = [];
      for (let key in this.resLists) {
        for (let i = 0; i < this.resLists[key].children.length; i++) {
          if (this.resLists[key].children[i].checked) {
            checkedArr.push(this.resLists[key].children[i].id);
          }
        }
      }
      let i = checkedArr.join(",");
      this.$confirm("此操作将为该角色分配所选资源, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        allocResourceApi({
          roleId: Number(this.$route.query.id),
          resourceIds: i,
        }).then((res) => {
          if (res.code === 200) {
            this.$message({
              type: "success",
              message: "提交成功!",
            });
          }
        });
      });
    },
  },
  created() {
    Promise.all([
      getAllResourceList(),
      getResourceCategory(),
      getRoleResApi(this.$route.query.id),
    ]).then((res) => {
      // 方法1
      if (res[0].code === 200 && res[1].code === 200) {
        let resLists = res[0].data; //资源数组
        let resCateLists = res[1].data; //资源分类数组
        let resResult = [];
        for (let i = 0; i < resCateLists.length; i++) {
          resResult.push({
            ...resCateLists[i],
            children: [],
          });
          for (let j = 0; j < resLists.length; j++) {
            let cateId = resLists[j].categoryId;
            // 新结果最后一个元素id和资源数组里面分类id进行对比
            if (resResult[resResult.length - 1].id === cateId) {
              // 往新的数组最后一个元素里面children添加这个资源
              resResult[resResult.length - 1].children.push(resLists[j]);
            }
          }
        }
      }
      // 方法2
      if (res[0].code === 200 && res[1].code === 200) {
        let resLists = res[0].data; //资源数组
        let resCateLists = res[1].data; //资源分类数组
        let resResult = {};
        for (let i = 0; i < resCateLists.length; i++) {
          // debugger;
          resResult[resCateLists[i].id] = { ...resCateLists[i], children: [] };
        }
        for (let j = 0; j < resLists.length; j++) {
          let cateId = resLists[j].categoryId;
          resResult[cateId].children.push(resLists[j]);
        }
        this.resLists = resResult;
      }
      if (res[2].code === 200) {
        let roleResLists = res[2].data.map((item) => item.id);
        // 编辑新的数据结构
        for (let key in this.resLists) {
          let count = 0;
          for (let i = 0; i < this.resLists[key].children.length; i++) {
            // 每一个资源id
            let newId = this.resLists[key].children[i].id;
            // 判断当前的资源id是否在用户当前的资源列表里面
            if (roleResLists.indexOf(newId) > -1) {
              this.$set(this.resLists[key].children[i], "checked", true);
              count++;
            }
          }
          this.changeCheckbox(count, key);
        }
      }
    });
  },
};