实现el-tree搭配el-checkbox实现全选，半选，全不选

<!-- 用户编辑弹窗 -->
<template>
  <el-dialog width="480px" :visible="visible" :title="isUpdate ? '下发' : '下发'" @update:visible="updateVisible">
    <el-form ref="form" label-width="120px">
      <el-row class="treeList" style="margin-top: 20px;">
        <el-col style="text-align: left;margin: 10px 0 0 54px;">
          <el-checkbox v-model="checkecd" :indeterminate="indeterminate" @change="checkedAll">全部</el-checkbox>
        </el-col>
        <el-col>
          <el-tree v-loading="loading" ref="tree" :data="dataTree" show-checkbox node-key="id" :props="defaultProps"
            :default-checked-keys="checkedKeys" @check="changeCheck">
            
          </el-tree>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save"> 发送 </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { Message } from 'element-ui';


export default {
  name: 'LightSave',
  props: {
    info: {},
    visible: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      iemIndex: 1,
      // 提交状态
      loading: false,
      isUpdate: false,
      radio: null,
      defaultProps: {
        children: 'loopTreeVos',
        label: 'illuminationName'
      },
      dataTree: [],
      checkedKeys: [],
      treeData: [],
      obj: {},
      checkecd: false,// 全选状态
      indeterminate: false // 半选状态
    };
  },
  
  created() {
    let iemIndex = this.iemIndex;
    this.getTreeList(iemIndex);
    this.obj = this.info;
  },
  methods: {
    checkedAll() {
      if (this.checkecd) {
        for (let i = 0; i < this.dataTree.length; i++) {
          if (this.$refs.tree.getNode(this.dataTree[i]).disabled == false) {
            this.$refs.tree.setChecked(this.dataTree[i].id, true, true);
          }
        }
        this.treeData = this.$refs.tree.getCheckedNodes(false, true).map(i => i.id);
        this.indeterminate=false;
        // console.log(this.treeData,'全选哦')
      } else {
        this.$refs.tree.setCheckedNodes([])
        this.treeData =[];
        this.indeterminate=false;
      }
    },
 
    // 获取树级结构
    async getTreeList(index) {
      this.loading=true;
      let params = {
        streetId: 3,
        type: index,
      }
      let res = await this.req.get('接口, { params });
      
      this.dataTree = res;
        this.loading=false

    },
    changeCheck() {
      this.treeData = this.$refs.tree.getCheckedNodes(false, true).map(i => i.id);
      let str = '';
      if (this.treeData.length) {
        str = this.treeData.join(',');
        console.log(str)
        if(this.treeData.length==this.dataTree.length){
          this.checkecd=true;
          this.indeterminate=false
        }else{
          this.checkecd=false;
          this.indeterminate=false
        }

      }
      if((this.treeData.length<this.dataTree.length) && this.treeData.length){
          this.indeterminate=true;
        }else{
          this.indeterminate=false;
        }
    },

  
    updateVisible(value) {
      this.$emit('update:visible', value);
    },

  },


};
</script>

<style scoped>
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.itemtop {
  min-width: 96px;
  margin-right: 20px;
  text-align: center;
  font-size: 16px;
  font-weight: bolder;
  border-bottom: 3px solid #fff;
}

.active_item {
  color: #0c9150;
  border-bottom: 3px solid #0c9150;
}

.treeList {
  border: 1px solid #ccc;
  border-radius: 10px;
  height: 390px;
  overflow-y: scroll;
  width: 366px;
  margin: 0 auto;
  text-align: center;
}

/deep/ .el-tree {
  margin: 0 auto;
  text-align: center;
  margin-top: 2px;
  margin-left: 30px;
}
</style>