轉：

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>