您好,登錄后才能下訂單哦!
本文實(shí)例為大家分享了vue實(shí)現(xiàn)帶復(fù)選框的樹形菜單展示的具體代碼,供大家參考,具體內(nèi)容如下
代碼:
<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:"當(dāng)前項(xiàng)目"}, { id:12,pid:1,name:"工程管理",open:true, children: [ { id:121,pid:12,name:"我的工程"}, { id:122,pid:12,name:"施工調(diào)度"}, { id:1211,pid:12,name:"材料競價(jià)"} ] }, { id:13,pid:1,name:"錄入管理",open:true, children: [ { id:131,pid:13,name:"用工錄入"}, { id:132,pid:13,name:"商家錄入"}, { id:1314,pid:13,name:"機(jī)構(gòu)列表"} ] }, { id:14,pid:1,name:"審核管理",open:true, children: [ { id:141,pid:14,name:"用工審核"}, { id:142,pid:14,name:"商家審核"}, { id:145,pid:14,name:"機(jī)構(gòu)審核"} ] }, { id:15,pid:1,name:"公司管理",open:true, children: [ { id:1517,pid:15,name:"我的工程案例"}, { id:1518,pid:15,name:"聯(lián)系人設(shè)置"}, { id:1519,pid:15,name:"廣告設(shè)置"} ] }, { id:16,pid:1,name:"業(yè)務(wù)管理",open:true, children: [ { id:164,pid:16,name:"合同范本"}, { id:165,pid:16,name:"合同列表"}, { id:166,pid:16,name:"需求調(diào)度"} ] }, { id:17,pid:1,name:"訂單管理",open:true, children: [ { id:171,pid:17,name:"商品訂單"}, { id:172,pid:17,name:"用工訂單"}, { id:175,pid:17,name:"供應(yīng)菜單"} ] }, { id:18,pid:1,name:"我的功能",open:true, children: [ { id:181,pid:18,name:"免費(fèi)設(shè)計(jì)"}, { id:182,pid:18,name:"裝修報(bào)價(jià)"}, { id:1817,pid:18,name:"項(xiàng)目用工"} ] }, { id:19,pid:1,name:"分潤管理",open:true, children: [ { id:191,pid:19,name:"分潤列表"} ] }, { id:110,pid:1,name:"運(yùn)營管理",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>
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。