vue-giant-tree模糊搜索，自动展开匹配子节点，再次搜索可重新加载节点

vue-giant-tree是最ztree的一个封装，但有些方法是没有封装进去的，例如节点的隐藏方法hideNode()等

1、下载安装vue-giant-tree

npm i vue-giant-tree --save或使用淘宝镜像 cnpm i vue-giant-tree --save

2、在页面导入

import tree from "vue-giant-tree" 

3、h5页面代码

<div class="zTree">

    <search ref="search" @onSearch="onSearch"></search>  <!-- 搜索组件  -->

    <div class="tree"> <tree :nodes="nodes" :setting="setting" @onCreated="handleCreated"/> </div>

</div>

4、zTree配置及vue数据参考，具体参数可查看zTree官网zTree API文档

 

 

5、vue页面方法

handleCreated(ztreeObj){ 

     this.zTree = ztreeObj 

     let firstTree = ztreeObj.getNodes()[0]

     ztreeObj.expandNode(firstTree); // 展开第一行 

 }, 

onSearch(value){

     if(value){ 

         this.zTree.refresh() 

         let nodeList = this.zTree.getNodesByParamFuzzy('name', value) //模糊搜索

         if(this.expandNode.length > 0){ 

             for(let j in this.expandNode){ 

                 this.closeParentNode(this.expandNode[j]) 

             }

            } 

            this.expandNode = [] 

            let timeout = setTimeout(() =>{

                 clearTimeout(timeout) 

                 for(let i in nodeList){ 

                     this.firstNode = true this.getParentNode(nodeList[i]) 

                 }

             },300) } 

 }, 

 closeParentNode(node){ //关闭之前展开的节点

     if(node){ 

         let parentNode = node.getParentNode() 

         if(parentNode){ 

             this.zTree.expandNode(parentNode,false,false,false) //关闭节点

             this.closeParentNode(parentNode) 

         } 

         this.zTree.expandNode(node,false,false,false)//关闭节点

     } 

 }, 

 getParentNode(node){ 

     let parentNode = node.getParentNode() 

     this.expandNode.push(parentNode) //保存展开节点

      if(this.firstNode){ 

         this.firstNode = false 

         node.searchNode = 'searchNode' 

         this.zTree.expandNode(parentNode,true,false,false)//展开节点

         this.zTree.updateNode(node) node.searchNode = '' 

     }

 }

···

 

6、效果图