vue 項目中使用到了vue-giant-tree這個使用ztree封裝的樹形插件，在對其節點進行操作時遇到了無法向傳統的jquery那樣獲取到ztreeObj；而導致了無法控制節點dom；浪費了許多時間，so特此記錄一哈
Vue-Giant-Tree
Vue-Giant-Tree是最ztree的一個封裝；用於vue 項目中，該ztree的好處就是不需要自己將數據拼裝為樹形結構。只需要給他一個帶有子父級關系的數組即可；這就大大減少了拼裝數據的麻煩（直接從數據庫查詢出來就可以使用）
如：
nodes: [
{ id:1, pid:0, name:"隨意勾選 1", open:true},
{ id:11, pid:1, name:"隨意勾選 1-1", open:true},
{ id:111, pid:11, name:"隨意勾選 1-1-1"},
{ id:112, pid:11, name:"隨意勾選 1-1-2"},
{ id:12, pid:1, name:"隨意勾選 1-2", open:true},
{ id:121, pid:12, name:"隨意勾選 1-2-1"},
{ id:122, pid:12, name:"隨意勾選 1-2-2"},
{ id:2, pid:0, name:"隨意勾選 2", checked:true, open:true},
{ id:21, pid:2, name:"隨意勾選 2-1"},
{ id:22, pid:2, name:"隨意勾選 2-2", open:true},
{ id:221, pid:22, name:"隨意勾選 2-2-1", checked:true},
{ id:222, pid:22, name:"隨意勾選 2-2-2"},
{ id:23, pid:2, name:"隨意勾選 2-3"}
]
一、 項目需求
根據數據類型隱藏節點
根據ztee官網http://www.treejs.cn/v3/api.php提示根據如下hideNode()方法可以隱藏節點
但在進行封裝的vue-giant-tree中不能使用如下方法
var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getNodes();
treeObj.hideNode(nodes[0]);
二、使用ref獲取dom
於是想到了使用ref
<template>
<tree :nodes="nodes" :setting="setting" @onClick="onClick" @onCheck="onCheck" ref='ztreeDom'/>
</template>
//js
methods:{
setNodeVisible(){
let treeDom = this.$refs.ztreeDom;
console.log(treeDom);
}
}
打印如下圖
的確可以根據dom找到ztreeObj；但是根本無法使用treeDom.ztreeObj操作節點
let ztreeObj = treeDom.ztreeObj;
let treeNodes = ztreeObj .getNodes();
console.log(treeNodes); // []
ztreeObj.removeNode(treeNodes[0]);
從上的console得知無法獲取子節點，那么自然這個操作是失敗的了
三、 使用handleCreated方法
最后從作者的 App.vue 中找到了@onCreated="handleCreated" 方法；
於是修改組件綁定
<tree :nodes="nodes" :setting="setting" @onClick="onClick" @onCheck="onCheck" @onCreated="handleCreated"/>
使用handleCreated緩存ztreeObj
methods: {
handleCreated: function(ztreeObj) {
this.ztreeObj = ztreeObj;
},
}
這樣就可以對節點進行操作了。
下面是記錄使用的完整步驟
四、使用的完整步驟
4.1 package.json引入依賴
"dependencies": {
"vue-giant-tree": "^0.1.1"
},
4.2 組件綁定
<template>
<div class="nav-siderbar">
<tree :nodes="nodes" :setting="setting" @onClick="onClick" @onCheck="onCheck" @onCreated="handleCreated"/>
</div>
</template>
<script>
import tree from "vue-giant-tree";
import axios from 'axios';
export default {
name: 'map-demo',
components: {
tree
},
data() {
return {
ztreeObj: null,
setting: {
check: {
enable: true
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pid",
rootPId: "0"
}
}
},
nodes: [],
}
},
methods: {
handleCreated: function(ztreeObj) {
this.ztreeObj = ztreeObj;
// onCreated 中操作ztreeObj對象展開第一個節點
ztreeObj.expandNode(ztreeObj.getNodes()[0], true);
let ztreeNodes = ztreeObj.getNodes()[0].children;
ztreeNodes.find(treeNode => {
if(treeNode.type == "***"){
ztreeObj.setChkDisabled(treeNode,true);
};
});
ztreeObj.setChkDisabled(ztreeObj.getNodes()[0],true);
},
getTree(val) {
axios.post('http://127.0.0.1:8081', {}, {
headers: {
'Content-Type': 'application/json'
}
})
.then(response => {
this.nodes = response.data;
}, err => {
console.log(err)
})
},
// 點擊事件
onClick: function(evt, treeId, treeNode) {
if(treeNode.type){
if(treeNode.type == "***" ){
return;
};
}
},
// 選中事件
onCheck: function(evt, treeId, treeNode) {
// 獲取數據treeNode根據checked 是否為true判斷是否選中
if(treeNode.checked){
}else{
}
},
}
}
</script>
4.3 最終效果圖
