ant design vue 中a-tree搜索查询

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

 
          
源列表
          
          
            
          
           → 
        

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-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;iitem.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);
          }
        }
      },

实现效果：