element-ui checkbox三级选择 实现

转：

https://www.jb51.net/article/148826.htm，把样式删除了

效果图：

贴代码：

<template>
  <div class="roleSetting">
    <div class="selection">
      <el-checkbox
        v-model="ischeckAll"
        :indeterminate="indeterminate"
        @change="handleCheckAllChange"
      >全选</el-checkbox>
    </div>
    <div
      v-for="(partition,partitionIndex) in distributorsInfo"
      :key="partitionIndex"
      class="role-box"
    >
      <div class="selection">
        <p>
          <el-checkbox
            :key="partitionIndex"
            v-model="partition.selected"
            :indeterminate="partition.indeterminate"
            @change="handleCheckedCountryAllChange(partitionIndex,partition.partitionId,$event)"
          >{{ partition.partitionName }}</el-checkbox>
        </p>
      </div>
      <div class="modules">
        <el-checkbox
          v-for="country in partition.country"
          :key="country.id"
          v-model="country.selected"
          :label="country"
          @change="handleCheckedCountryChange(partitionIndex,country.id,partition.partitionId,$event)"
        >{{ country.fieldName }}</el-checkbox>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "RoleSetting",
  components: {},
  props: {},
  data() {
    return {
      distributorsInfo: [
        {
          partitionName: "1区",
          selected: false,
          partitionId: 1,
          isIndeterminate: false,
          country: [
            {
              id: "1",
              fieldName: "奥地利",
              selected: false
            },
            {
              id: "2",
              fieldName: "芬兰",
              selected: false
            },
            {
              id: "3",
              fieldName: "意大利",
              selected: false
            },
            {
              id: "4",
              fieldName: "葡萄牙",
              selected: false
            },
            {
              id: "9",
              fieldName: "西班牙",
              selected: false
            },
            {
              id: "10",
              fieldName: "瑞典",
              selected: false
            }
          ]
        },
        {
          partitionName: "2区",
          selected: false,
          partitionId: 2,
          isIndeterminate: false,
          country: [
            {
              id: "5",
              fieldName: "丹麦",
              selected: false
            },
            {
              id: "6",
              fieldName: "法国",
              selected: false
            }
          ]
        },
        {
          partitionName: "3区",
          selected: false,
          partitionId: 3,
          isIndeterminate: false,
          country: [
            {
              id: "7",
              fieldName: "德国",

              selected: false
            },
            {
              id: "8",
              fieldName: "瑞士",
              selected: false
            }
          ]
        }
      ],
      ischeckAll: false, // 一级全选状态
      setDistributorDailog: false,
      cancelDistributorDailog: false,
      indeterminate: false
    };
  },
  methods: {
    handleCheckAllChange(e) {
      // 一级change事件
      this.ischeckAll = e;
      if (e == true) {
        this.indeterminate = false;
        for (let i = 0, len = this.distributorsInfo.length; i < len; i++) {
          // 二级全选反选不确定
          this.distributorsInfo[i].selected = e;
          for (
            let j = 0, len1 = this.distributorsInfo[i].country.length;
            j < len1;
            j++
          ) {
            this.distributorsInfo[i].country[j].selected = e;
          }
        }
      } else {
        this.indeterminate = false;
        for (let i = 0, len = this.distributorsInfo.length; i < len; i++) {
          // 三级全选反选不确定
          this.distributorsInfo[i].selected = e;
          for (
            let j = 0, len1 = this.distributorsInfo[i].country.length;
            j < len1;
            j++
          ) {
            this.distributorsInfo[i].country[j].selected = e;
          }
        }
      }
      console.log(this.distributorsInfo);
    },
    handleCheckedCountryAllChange(index, topId, e) {
      // 二级change事件
      this.distributorsInfo[index].selected = e; // 二级勾选后，子级全部勾选或者取消
      if (e == false) this.distributorsInfo[index].indeterminate = false; // 去掉二级不确定状态
      let childrenArray = this.distributorsInfo[index].country;
      if (childrenArray) {
        for (let i = 0, len = childrenArray.length; i < len; i++) {
          childrenArray[i].selected = e;
        }
      }

      this.getIsCheckAll();
    },
    handleCheckedCountryChange(topIndex, sonId, topId, e) {
      // 三级change事件
      let childrenArray = this.distributorsInfo[topIndex].country;
      let tickCount = 0;
      let unTickCount = 0;
      let len = childrenArray.length;
      for (let i = 0; i < len; i++) {
        if (sonId == childrenArray[i].id) childrenArray[i].selected = e;
        if (childrenArray[i].selected == true) tickCount++;
        if (childrenArray[i].selected == false) unTickCount++;
      }
      if (tickCount == len) {
        // 三级级全勾选
        this.distributorsInfo[topIndex].selected = true;
        this.distributorsInfo[topIndex].indeterminate = false;
      } else if (unTickCount == len) {
        // 三级级全不勾选
        this.distributorsInfo[topIndex].selected = false;
        this.distributorsInfo[topIndex].indeterminate = false;
      } else {
        this.distributorsInfo[topIndex].selected = false;
        this.distributorsInfo[topIndex].indeterminate = true; // 添加二级不确定状态
      }

      this.getIsCheckAll();
    },
    getIsCheckAll() {
      let tickCount = 0;
      let unTickCount = 0;
      let ArrLength = this.distributorsInfo.length;
      for (let j = 0; j < ArrLength; j++) {
        // 全选checkbox状态
        if (this.distributorsInfo[j].selected == true) tickCount++;
        if (this.distributorsInfo[j].selected == false) unTickCount++;
      }
      if (tickCount == ArrLength) {
        // 二级全勾选
        this.ischeckAll = true;
        this.indeterminate = false;
      } else if (unTickCount == ArrLength) {
        // 二级全不勾选
        this.ischeckAll = false;
        this.indeterminate = false;
      } else {
        this.ischeckAll = false;
        this.indeterminate = true; // 添加一级不确定状态
      }
      console.log("0111", this.distributorsInfo);
    }
  }
};
</script>
<style lang="less">
.modules {
  margin-left: 25px;
}
</style>