首先，在vue項目的main.js中引入以下幾個文件：
import "../../plugins/ztree/js/jquery.ztree.core.min.js" import "../../plugins/ztree/js/jquery.ztree.excheck.min.js" import '../../plugins/ztree/css/zTreeStyle.css
頁面詳細代碼如下：
<template>
<div id="areaTree">
<div class="box-title">
<a href="#">列表<i class="fa fa-refresh" @click="freshArea">點擊</i></a>
</div>
<div class="tree-box">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
</div>
</template>
<script>
// 下面的是單個Vue組件引用的外部靜態文件，也可以在main.js文件中引用
//import "../../plugins/jquery.3.2.1.js"
//import "../../plugins/ztree/js/jquery.ztree.core.min.js"
//import "../../plugins/ztree/js/jquery.ztree.excheck.min.js"
export default {
name: 'areaTree',
components:{
},
data:function(){
return{
setting:{
check: {
enable: true,
nocheckInherit: false ,
chkboxType: { "Y": "p", "N": "s" }
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeClick: this.beforeClick,
onClick: this.zTreeOnClick,
onCheck: this.zTreeOnCheck,
}
},
zNodes:[
{ id:1,pid:0,name:"大良造菜單",open:true,nocheck:false,
children: [
{ id:11,pid:1,name:"當前項目"},
{ id:12,pid:1,name:"工程管理",open:true,
children: [
{ id:121,pid:12,name:"我的工程"},
{ id:122,pid:12,name:"施工調度"},
{ id:1211,pid:12,name:"材料競價"}
]
},
{ id:13,pid:1,name:"錄入管理",open:true,
children: [
{ id:131,pid:13,name:"用工錄入"},
{ id:132,pid:13,name:"商家錄入"},
{ id:1314,pid:13,name:"機構列表"}
]
},
{ id:14,pid:1,name:"審核管理",open:true,
children: [
{ id:141,pid:14,name:"用工審核"},
{ id:142,pid:14,name:"商家審核"},
{ id:145,pid:14,name:"機構審核"}
]
},
{ id:15,pid:1,name:"公司管理",open:true,
children: [
{ id:1517,pid:15,name:"我的工程案例"},
{ id:1518,pid:15,name:"聯系人設置"},
{ id:1519,pid:15,name:"廣告設置"}
]
},
{ id:16,pid:1,name:"業務管理",open:true,
children: [
{ id:164,pid:16,name:"合同范本"},
{ id:165,pid:16,name:"合同列表"},
{ id:166,pid:16,name:"需求調度"}
]
},
{ id:17,pid:1,name:"訂單管理",open:true,
children: [
{ id:171,pid:17,name:"商品訂單"},
{ id:172,pid:17,name:"用工訂單"},
{ id:175,pid:17,name:"供應菜單"}
]
},
{ id:18,pid:1,name:"我的功能",open:true,
children: [
{ id:181,pid:18,name:"免費設計"},
{ id:182,pid:18,name:"裝修報價"},
{ id:1817,pid:18,name:"項目用工"}
]
},
{ id:19,pid:1,name:"分潤管理",open:true,
children: [
{ id:191,pid:19,name:"分潤列表"}
]
},
{ id:110,pid:1,name:"運營管理",open:true,
children: [
{ id:1101,pid:110,name:"代理列表"},
{ id:1102,pid:110,name:"代售商品"}
]
},
]
}
]
}
},
methods:{
freshArea: function(){
$.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
},
zTreeOnClick: function(event, treeId, treeNode) {
console.log(treeNode.tId + ", " + treeNode.name);
},
zTreeOnCheck: function(event, treeId, treeNode) {
console.log(treeNode.tId + ", " + treeNode.name + "," + treeNode.checked);
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
checkCount = zTree.getCheckedNodes(true).length,//選中
nocheckCount = zTree.getCheckedNodes(false).length,//未選中
changeCount = zTree.getChangeCheckedNodes().length;//獲取輸入框勾選狀態被改變的節點集合（與原始數據 checkedOld 對比）
var checkedNames = [],checkedIds = [];
for (var i = 0; i <= zTree.getCheckedNodes(true).length - 1; i++) {
checkedIds.push(zTree.getCheckedNodes(true)[i].id);
checkedNames.push(zTree.getCheckedNodes(true)[i].name);
};
console.log(checkedIds);
console.log(checkedNames);
},
beforeClick: function(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
// zTree.checkNode(treeNode, !treeNode.checked, null, true);
zTree.checkNode(treeNode, !treeNode.checked, true, true); //第二個參數!treeNode.checked和"",省略此參數效果等同，則根據對此節點的勾選狀態進行 toggle 切換，第三個參數設置為true時候進行父子節點的勾選聯動操作 ，第四個參數true 表示執行此方法時觸發 beforeCheck & onCheck 事件回調函數；false 表示執行此方法時不觸發事件回調函數
return false;
}
},
mounted(){
$.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes).expandAll(true);
}
}
</script>
<style>
/*@import '../../plugins/ztree/css/zTreeStyle.css';*/
#areaTree{
border:1px solid #e5e5e5; margin-bottom: 2px;border-radius: 4px;overflow: hidden;
}
.box-title{
border-radius: 3px 3px 0 0;background-color: #f5f5f5;
}
.box-title a{
color: #2fa4e7;
text-decoration: none;font-size:14px; display: block;
padding: 8px 15px;cursor: pointer;
}
.box-title .fa{
float:right;line-height: 20px;
}
</style>
<style>
/*@import '../../plugins/ztree/css/zTreeStyle.css';*/
#areaTree{
border:1px solid #e5e5e5; margin-bottom: 2px;border-radius: 4px;overflow: hidden;
}
.box-title{
border-radius: 3px 3px 0 0;background-color: #f5f5f5;
}
.box-title a{
color: #2fa4e7;
text-decoration: none;font-size:14px; display: block;
padding: 8px 15px;cursor: pointer;
}
.box-title .fa{
float:right;line-height: 20px;
}
</style>
效果如圖所示：
