vue實現帶復選框的樹形菜單
更新時間:2019年05月27日 17:12:13 作者:就叫青稞吧
這篇文章主要為大家詳細介紹了vue實現帶復選框的樹形菜單,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了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:"業(yè)務管理",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>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Vue導入excel文件的兩種方式(form表單和el-upload)
最近開發(fā)遇到一個點擊導入按鈕讓excel文件數據導入的需求,下面這篇文章主要給大家介紹了關于Vue導入excel文件的兩種方式,分別是form表單和el-upload兩種方法,需要的朋友可以參考下2022-11-11Vue實現獲取后端接口API代碼片段(已封裝Service方法名)
Vue實現獲取后端接口API代碼片段(已封裝Service方法名),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07vue3.0使用taro-ui-vue3引入組件不生效的問題及解決
這篇文章主要介紹了vue3.0使用taro-ui-vue3引入組件不生效的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03Vue Element UI 表單自定義校驗規(guī)則及使用
這篇文章主要介紹了Vue Element UI 表單自定義效驗規(guī)則及使用,文中通過代碼介紹了常見表單效驗規(guī)則,代碼簡單易懂,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-02-02