element Checkbox 多选框

1、在实际项目过程中，我们会遇到一些多选框，数据是后台请求遍历出来的，如下图：

那么我们就需要改一下element 的Checkbox 多选框
代码如下：

<template>
  <div class="deliverySetting">
    <div class="deliverySetting-table">
      <div
        class="table-body"
        v-for="(partition,partitionIndex) in distributorsInfo"
        :key="partitionIndex"
      >
        <div class="selection">
          <p>
            <el-checkbox
              :indeterminate="partition.indeterminate"
              v-model="partition.selected"
              @change="handleCheckedCountryAllChange(partitionIndex,partition.partitionId,$event,partition.country)"
              :key="partitionIndex"
            >{{partition.fieldTableName}}</el-checkbox>
          </p>
        </div>
        <div class="width265">
          <el-checkbox-group v-model="list" @change="handleCheckedCitiesChange">
            <el-checkbox
              v-for="country in partition.country"
              @change="handleCheckedCountryChange(partitionIndex,country.id,partition.partitionId,$event)"
              :label="country.id"
              :key="country.id"
            >{{country.fieldTableName}}</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "deliverySetting",
  components: {},
  props: {},
  data() {
    return {
      list: ["1", "2", "3", "4", "9", "10", "7", "8"],
      checkAll: false,
      distributorsInfo: [
        {
          partitionName: "1区",
          selected: false,
          partitionId: 1,
          isIndeterminate: false,
          country: [
            {
              id: "1",
              fieldName: "奥地利",
              fieldTableName: "奥地利",
              distributors: "UPS",
              selected: false
            },
            {
              id: "2",
              fieldName: "芬兰",
              fieldTableName: "芬兰",
              distributors: "UPS",
              selected: false
            },
            {
              id: "3",
              fieldName: "意大利",
              fieldTableName: "意大利",
              distributors: "UPS",
              selected: false
            },
            {
              id: "4",
              fieldName: "葡萄牙",
              fieldTableName: "葡萄牙",
              distributors: "UPS",
              selected: false
            },
            {
              id: "9",
              fieldName: "西班牙",
              fieldTableName: "西班牙",
              distributors: "UPS",
              selected: false
            },
            {
              id: "10",
              fieldName: "瑞典",
              fieldTableName: "瑞典",
              distributors: "UPS",
              selected: false
            }
          ]
        },
        {
          partitionName: "2区",
          selected: false,
          partitionId: 2,
          isIndeterminate: false,
          country: [
            {
              id: "5",
              fieldName: "丹麦",
              fieldTableName: "单买",
              distributors: "",
              selected: false
            },
            {
              id: "6",
              fieldName: "法国",
              fieldTableName: "法国",
              distributors: "",
              selected: false
            }
          ]
        },
        {
          partitionName: "3区",
          selected: false,
          partitionId: 3,
          isIndeterminate: false,
          country: [
            {
              id: "7",
              fieldName: "德国",
              fieldTableName: "德国",
              distributors: "YODEL",
              selected: false
            },
            {
              id: "8",
              fieldName: "瑞士",
              fieldTableName: "瑞士",
              distributors: "DPD",
              selected: false
            }
          ]
        }
      ],
      ischeckAll: false, //一级全选状态

      distributorForm: {
        vendorName: "",
        senderName: ""
      },
      indeterminate: false,
      cc: []
    };
  },
  created() {
    // this.detail();
    setTimeout(() => {
      this.aa();
    }, 200);
  },
  methods: {
    handleCheckedCitiesChange(value) {
      console.log(value);
    },
    aa() {
      this.distributorsInfo.forEach((i, index) => {
        // console.log(i.country);
        i.country.forEach(item => {
          let res = item;
          if (this.list.includes(item.id)) {
            res.selected = true;
          } else {
            res.selected = false;
          }
        });
      });
      this.opreationData();
      // console.log(this.distributorsInfo);
    },
    opreationData() {
      this.distributorsInfo.forEach(item => {
        if (item.country && item.country.length > 0) {
          item.selected = item.country.every(item => item.selected);
        }
      });
    },
    handleCheckedCountryAllChange(index, topId, e, val) {
      // //二级change事件
      this.distributorsInfo[index].selected = e; //二级勾选后，子级全部勾选或者取消
      if (e == true) {
        this.distributorsInfo[index].country.forEach(i => {
          this.list.push(i.id);
        });
        console.log(this.list);
      } else if (e == false) {
        val.forEach(i => {
          this.list.forEach((item, index) => {
            if (i.id == item) {
              this.list.splice(index, 1);
            }
          });
        });
        console.log(this.list);
      }
    },
    handleCheckedCountryChange(topIndex, sonId, topId, e) {
      //三级change事件
      var childrenArray = this.distributorsInfo[topIndex].country;
      var tickCount = 0,
        unTickCount = 0,
        len = childrenArray.length;
      for (var 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();
      console.log(this.distributorsInfo);
    },
    getIsCheckAll() {
      var tickCount = 0,
        unTickCount = 0,
        ArrLength = this.distributorsInfo.length;
      for (var 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; //添加一级不确定状态
      }
    }
  }
};
</script>