vue组件＜el-select-tree＞实现树形下拉框

近期业务需求，需要结合el-tree和el-select，做一个下拉树形多选，本来使用 el-select-tree 组件库可以实现，但是有一些小细节官方文档上都没体现出来，下面是设计图

需求：点击子节点时，如果父节点没有勾选要勾选，点击父节点如果子节点全选就取消，如果没有就全选

下面是实现代码

<el-select-tree
    style="width: 100%"
    :placeholder="$t('introduce.tip.select_category')"
     :data="classData"
     :props="treeDefaultProps"
     v-model="product.classId"
     :default-checked-keys="product.classId"
     @change="areaChangeClassify(product.classId)"
     @check="confirmTree"
     checkStrictly
     multiple
     show-checkbox
></el-select-tree>
>
areaChangeClassify(classId) {
		// 这里判断是否包含父节点，没有就加上去
      if(this.product.classId.length && this.product.classId.indexOf(this.classData[0].id) === -1){
        this.product.classId.unshift(this.classData[0].id)
      }
      // 这里判断是否点击的是父节点
      if(this.currentClassId === this.classData[0].id){
      // 这里判断子元素是否全选，是的话取消，不是就全选
        if(this.product.classId.length <= this.classData[0].children.length){
          this.product.classId = []
          this.product.classId.unshift(this.classData[0].id)
          this.classData[0].children.forEach(item=>{
            this.product.classId.push(item.id)
          })
        }else if(this.product.classId.length > 1){
          this.product.classId = []
        }
      }
      // 有时候会有重复的，这里去重
      this.product.classId = [...new Set(this.product.classId)]
    },
    // 这里是获取到当前点击的节点，赋值过去判断
    confirmTree(classId){
      this.currentClassId = classId.id
    },

注意：

1. 这里版本要用 `2.0.18` 以上， 否则没有 check 事件
2. 如果是赋值，需要用到 `default-checked-keys`，否则不会回显

~ 到这里就完成了，这是最简单的，只有一层结构
如果有多级，还可以使用递归的方法来判断，这里就不做展示了