溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了vue實現帶復選框的樹形菜單展示的具體代碼，供大家參考，具體內容如下
代碼：
<template>
<div id="checkTree">
<div class="tree-box">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'checkTree',
components:{
},
data:function(){
return{
setting:{
check: {
enable: true,
nocheckInherit: false
},
data: {
simpleData: {
enable: true
}
}
},
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:{
},
mounted(){
$.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
}
}
</script>
<style>
@import '../../../plugins/ztree/zTreeStyle.css';
</style>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
