vue-giant-tree是對ztree的一個(gè)封裝，但有些方法是沒有封裝進(jìn)去的，例如節(jié)點(diǎn)的隱藏方法hideNode()等
1、下載安裝vue-giant-tree
npm i vue-giant-tree --save或使用淘寶鏡像?cnpm i vue-giant-tree --save
2、在頁面導(dǎo)入
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數(shù)據(jù)參考，具體參數(shù)可查看zTree官網(wǎng)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){ //關(guān)閉之前展開的節(jié)點(diǎn)
?????if(node){?
?????????let parentNode = node.getParentNode()?
?????????if(parentNode){?
?????????????this.zTree.expandNode(parentNode,false,false,false) //關(guān)閉節(jié)點(diǎn)
?????????????this.closeParentNode(parentNode)?
?????????}?
?????????this.zTree.expandNode(node,false,false,false)//關(guān)閉節(jié)點(diǎn)
?????}?
?},?
?getParentNode(node){?
?????let parentNode = node.getParentNode()?
?????this.expandNode.push(parentNode) //保存展開節(jié)點(diǎn)
? ? ? if(this.firstNode){?
?????????this.firstNode = false?
?????????node.searchNode = 'searchNode'?
?????????this.zTree.expandNode(parentNode,true,false,false)//展開節(jié)點(diǎn)
?????????this.zTree.updateNode(node) node.searchNode = ''?
?????}
?}
···
6、效果圖
