Vue el-tree

<template>
    <div>
        <div>
            <el-input placeholder="请输入关键字进行查询" style="width: 300px" v-model="filterText"></el-input>
            <el-tree
                    :data="treeData"
                    :props="treeProps"
                    node-key="ID"
                    @node-click="handleNodeClick"
                    :default-expanded-keys="['999900020014']"      //默认展开的节点ID
                    :highlight-current="true"
                    :filter-node-method="filterNode"
                    ref="tree"
                    style="width: 300px;margin-top: 10px"
            ></el-tree>
        </div>
    </div>
</template>

<script>
   import C from '../assets/com';
   export default {
        created(){
          this.getDwData()
        },
        data(){
          return{
             treeData:[],
                deptData:[],        //科室数据
             filterText:"",
             treeProps:{
                children:"children",
                label:"DWQC",
                    id:"ID"
             },
            }
        },

        watch:{
           filterText(val){
              this.$refs.tree.filter(val)
            }
        },

      methods:{
            //筛选树
            filterNode(value,data,node) {
                if(!value){return true;}      //把所有节点打开
                let level = node.level;

                let _array = [];              //这里使用数组存储 只是为了存储值。
                this.getReturnNode(node,_array,value);
                let result = false;
                _array.forEach((item)=>{
                    result = result || item;
                });
                return result;
            },

            //打开选中的树的节点
            getReturnNode(node,_array,value){
                let isPass = node.data &&  node.data.DWQC && node.data.DWQC.indexOf(value) !== -1;
                isPass ? _array.push(isPass) : '';
                this.index++;
                console.log(this.index);
                if(!isPass && node.level !==1 && node.parent){
                    this.getReturnNode(node.parent,_array,value);
                }
            },

//如果不明白上面的写法 可以看下面详解的写法 


 // 触发页面显示配置的筛选
      filterNode(value, data, node) {
        // 如果什么都没填就直接返回
        if (!value) return true;
        // 如果传入的value和data中的label相同说明是匹配到了
        if (data.label.indexOf(value) !== -1) {
          return true;
        }
        // 否则要去判断它是不是选中节点的子节点
        return this.checkBelongToChooseNode(value, data, node);
      },
      // 判断传入的节点是不是选中节点的子节点
      checkBelongToChooseNode(value, data, node) {
        const level = node.level;
        // 如果传入的节点本身就是一级节点就不用校验了
        if (level === 1) {
          return false;
        }
        // 先取当前节点的父节点
        let parentData = node.parent;
        // 遍历当前节点的父节点
        let index = 0;
        while (index < level - 1) {
          // 如果匹配到直接返回
          if (parentData.data.label.indexOf(value) !== -1) {
            return true;
          }
          // 否则的话再往上一层做匹配
          parentData = parentData.parent;
          index ++;
        }
        // 没匹配到返回false
        return false;
      },

         //获取单位数据
         getDwData(){
            C.getDb({c: "11186", author: "单位数据", url:''},
               (r)=>{
                  this.treeData = [C.convertTreeData(r)[0]];
               })
             },

            //树节点点击获取科室数据
         handleNodeClick(data){
                C.getDb({c:'11195', author: '科室数据', url:'',s:[data.UNIT_ID]},
                    (r)=>{
                       this.deptData = r;
                       if(!data.children){
                          this.append(data);
                        }
                    });
                },

            //子节点增加子节点
            append(data){
               var newChild = [];
              this.deptData.forEach((item,index)=>{
                 newChild.push({ID:item.ID,DWQC:item.LABEL});
                });
               if (!data.children){
                  this.$set(data,"children",[]);
               }
               data.children = newChild
            }
        }
    }
</script>

<style >
    /*修改选中节点的颜色*/
    .el-tree-node:focus > .el-tree-node__content{
        background: white;
        color: red;
    }

    /*修改节点之间的距离*/
    div.el-tree-node__content{
        height: 35px;
    }
</style>

 

参考：https://www.jianshu.com/p/ae50ce022f2b