关于element中树型组件多个高亮以及搜索返回完整父子元素

<template>
    <div class="index">
      <div style="width: 100%;display: flex;" v-if="isnull">
        <el-input placeholder="输入目录名称" style="width: 150px;"  prefix-icon="el-icon-search" v-model="filterText" class="isinput" @clear="handleEmpty" clearable></el-input>
        <span class="isspan" @click="iscz()">重置</span>
      </div>
      <div style="width: 100%;display: flex;" v-if="!isnull">
        <el-input placeholder="输入目录名称"   prefix-icon="el-icon-search" v-model="filterText" class="isinput" @clear="handleEmpty" clearable></el-input>
      </div>
      <div style="width: 100%;height: 20px;">
      </div>
      <div style="width: 100%;" class="istreeindex">
        <el-tree :data="datatree" :highlight-current="true"  node-key="id" 
        :filter-node-method="filterNode" class="istree"
       :default-expanded-keys="Sele"  ref="myTree" :props="defaultProps"
        @node-click="handleNodeClick"
        :render-content="renderContent"
        >
        <!--  :render-content="renderContent" -->
      </el-tree>

      </div>
      

    </div>
  </template>
  
  <script>
  import _ from 'lodash'
  export default {
  props:{
    datatree:{
      type: Array,
      default: () => []
    },
    Sele:{
      type: Array,
      default: () => []
    },
    isok:{
      default: ''
    },
    isnull:{
      default:false
    }

  },
    data() {
      return {
        // 以下是树型
        filterText:'',
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        list:[]
      };
    },
    watch: {
      filterText(val) {
        this.$refs.myTree.filter(val);
      },
      isok:{
        handler(n,o){
            // setTimeout(() =>{
            //     this.$nextTick(function () {
            //     this.$nextTick(() => {
            //       this.$refs.myTree.setCurrentKey(n);
            //     });
            //   });
            // }, 700); // 延时1秒执行
          },
        deep:true,
        immediate: true, 
      },
      Sele:{
        handler(n,o){
           this.list = n
          },
        deep:true,
        immediate: true, 
      }
    },
    mounted() {
     
    },
    methods: {

      renderContent(h,{node,data}){
        let arr = this.list
        if(arr.indexOf(data.id) != -1){

          return( <span class="iskdaoko isTTT">{data.label}</span> );

        }else{
          return( <span class="isTTT">{data.label}</span> );
        }
      },

      // //过滤
      // filterNode(value, data) {
      //   if (!value) return true;
      //   return data.label.indexOf(value) !== -1;
      // },
  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.label && node.data.label.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);
      }
  },



  iscz(){

    this.filterText = ''
    this.$emit('toiscz')
  },

  
      //树型点击
      handleNodeClick(item) {
        if(!item.children){
            // console.log("item",item)
            this.$emit('toFatree', item)
        }
      },


      // 清空事件
      handleEmpty(){
        
        this.$emit('toFaempty')
        
      },
      //input搜索
      inputanti:_.debounce(function(){
           console.log("触发了")
       },1000),
    }
  
  }
  </script>
  
  <style>
   .istree .el-tree-node.is-current > .el-tree-node__content {
    background-color: #fff !important;
    color: var(--mainyanse) !important;
   }

   .istree .el-tree-node__content:hover {
        /* background: #fff; */
        height: 100% !important;
    }
    .istree .el-tree-node__content{
        /* background: #fff; */
        height: 100% !important;
    }

   .isTTT{
    width: 100%;
    display: block;
    white-space: pre-wrap;
    word-break:break-all;
    font-size: 16px;
    /* background-color: #fff; */
   }

   .isTTT:hover{

    /* background-color: #F5F7FA; */
    color: var(--mainyanse);
   }

   

    .iskdaoko{
      color: var(--mainyanse) !important;
   }

   .istree .el-tree-node {
    
      padding: 10px 0;

   }
   .isinput {
    
        width: 100%;

    }

    .isinput  .el-input__inner{
        height: 50px !important;
        line-height: 50px !important;
        background-color: var(--inputyanse);
        border-radius: 8px;
        border: 1px solid #fff;
        font-size: 12px;
    }

    .istree .el-tree-node__label {
        font-size: 18px !important;
        
    }
  </style>
  <style scoped>
  .index{
    width: 100%;
   
  }

  .istreeindex{

    max-height: calc(100vh - 300px);
    /* max-height: calc(100vh - 500px); */
    overflow-y: scroll;

  }
  .istreeindex::-webkit-scrollbar-track {
      background-color: #fff;
      /* -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5); */
      border-radius: 0;
    }
    /* .istreeindex::-webkit-scrollbar {
      width: 0px;
    } */

    .isspan{
      /* display: block; */
      /* width: 24px; */
      height: 50px;
      line-height: 50px;
      margin-left: 6px;
      background-color: var(--inputyanse);
      color: #606266;
      font-size: 12px;
      padding: 0px 10px;
      border-radius: 8px;
      cursor:pointer;
    }
  </style>