ant design vue 中a-tree搜索查询

搜索查询并改变字体颜色。

 <a-card class="leftTree" :bordered="false" :loading="treeLoading" style="">
          <h2>源列表</h2>
          <a-input-search v-model="searchStr" placeholder="输入搜选项" style="width:200px;" @search="onSearch"></a-input-search>
          <a-tree
            class="treeStyle"
            v-model="checkedKeys"
            checkable
            multiple
            :auto-expand-parent="autoExpandParent"
            :expanded-keys="expandedKeys"
            :tree-data="treeData"
            :selected-keys="selectedKeys"
            :replaceFields="replaceFields"
            @expand="onExpand"
            @select="onSelect"
            @check="onCheck"
          >
            <template slot='name' slot-scope="{name}"> 
              <span v-html="name.replace(new RegExp(searchValue, 'g'),'<span style=color:#f50>' + searchValue + '</span>')"></span>
            </template>
          </a-tree>
          <a-button type="primary" @click="treeOk" class="rightClass"> <span>→</span> </a-button>
        </a-card>

onSearch(){
        var vm=this;
        vm.searchValue = vm.searchStr;
        if(vm.searchValue === ''){
          vm.expandedKeys = [];
        }else{
          vm.expandedKeys = [];
          vm.backupsExpandedKeys = [];
          let candidateKeysList = vm.getkeyList(vm.searchValue,vm.treeData,[]);
          candidateKeysList.map(
            item=>{
              var key=vm.getParentKey(item,vm.treeData);
              if(key && !vm.backupsExpandedKeys.some(item=>item===key))
                vm.backupsExpandedKeys.push(key);
            }
          )
          let length=this.backupsExpandedKeys.length;
          for(let i=0;i<length;i++){
            vm.getAllParentKey(vm.backupsExpandedKeys[i],vm.treeData)
          }
          vm.expandedKeys = vm.backupsExpandedKeys.slice();
        }
      },
      //获取节点中含有value的所有key集合
      getkeyList(value,tree,keyList){
        for(let i=0;i<tree.length;i++){
          let node = tree[i];
          node.scopedSlots={title: 'name'}
          if(node.name.indexOf(value)>-1){
            keyList.push(node.code);
          }
          if(node.children){
              this.getkeyList(value,node.children,keyList);
          }
        }
        return keyList;
      },

      //该递归主要用于获取key的父亲节点的key值
      getParentKey(key,tree){
        let parentKey,temp;
        for(let i=0;i<tree.length;i++){
          const node=tree[i];
      
          if(node.children){
            if(node.children.some(item=>item.code===key)){
              parentKey = node.code;
            }else if(temp=this.getParentKey(key,node.children)){
              parentKey = temp;
            }
          }
        }
        return parentKey;
      },
      //获取该节点的所有祖先节点
      getAllParentKey(key,tree){
        var parentKey;
        if(key){
          parentKey = this.getParentKey(key,tree);
          if(parentKey){
            if(!this.backupsExpandedKeys.some(item=>item===parentKey)){
              this.backupsExpandedKeys.push(parentKey);
            }
            this.getAllParentKey(parentKey,tree);
          }
        }
      },

实现效果：