el-select中嵌套el-tree并支持可通过关键字过滤数据

        <el-select
            :value="query.testProjectId"
            placeholder="请选择目录"
            style="width:100%"
            clearable
            ref='selectTree1'
            filterable
            @clear="clearHandle"
            :filter-method="filterNode"
            @focus="refreshFilterNode()"
          >
            <el-option id='selectTree' :value="query.testProjectId" :label='query.name' class="options">
              <el-tree
                id="tree-option"
                ref="selectTree"
                :filter-node-method="filterNodeProject"
                :data="projectTreeName?caseData:[]"
                :props="caseprops"
                :load="loadNode"
                lazy
                :highlight-current='true'
                @node-click="handleNodeClick"
                node-key='id'
              >
              </el-tree>
            </el-option>
          </el-select>

调用方法

    //过滤数据
    filterNode(value){
      this.$refs.selectTree.filter(value);
    },
    refreshFilterNode(){
      this.filterNode(this.query.name)
    },
    filterNodeProject(value, data) {
      if (!value) return true;
      if(this.node_had&&this.node_had.level>=1){
          this.refreshNodeBy(this.node_had.data.id)
      }
      return data[this.props.label].indexOf(value) !== -1;
    },
    //清空
    clearHandle(){
      this.query.testProjectId = ''
      this.query.name = ''
      this.$refs.selectTree.setCurrentKey();//清空选中效果
      this.$refs.selectTree.store._getAllNodes().forEach((v,i)=>{//收起树结构
        this.$refs.selectTree.store._getAllNodes()[i].expanded = false;
      })
      this.filterNode('');
    },
    // 切换选项
    handleNodeClick(node,data){
         this.query.testProjectId = node.testProjectId
         this.query.name = node.name
         this.nodeId = node.id
         this.query.level=node.level;
         this.node_had = data;
    },

   //展开过的节点再次查询点击没无数据
    requestNewData() {
      // this.node_had.childNodes = [];//把存起来的node的子节点清空，不然会界面会出现重复树！
      this.loadNode(this.node_had, this.node_had.level>=1? 
      this.resolve_had2:this.resolve_had);//再次执行懒加载的方法
    },
    refreshNodeBy(id){
     this.node_had.childNodes = [];//把存起来的node的子节点清空，不然会界面会出现重复树！
     let node = this.$refs.selectTree.getNode(id)// 通过节点id找到对应树节点对象
     node.loaded = false
     node.expand() // 主动调用展开节点方法，重新查询该节点下的所有子节点
   },
    
   //懒加载树结构
    async loadNode(node, resolve) {
      if(!node){
       //调用接口
        if(res){
          if(res.data.head.result==0){
               if(res.data.body.tradeFlowFolder){
                 this.caseData = res.data.body.tradeFlowFolder
                 }else{
             }
          }
        }else{
          this.$message.error(res.data.head.message);
        }
      }
      // if(node.level === 0) {
      //    return 
      //  }
       else{
         //调用接口
         if(res){
           if(res.data.head.result==0){
                if(res.data.body.tradeFlowFolder){
                    return resolve(res.data.body.tradeFlowFolder);
                  }else{
                    return resolve([]);
              }
           }
         }else{
           this.$message.error(res.data.head.message);
         }
       }
    },