本文实例为大家分享了vue实现带复选框的树形菜单展示的具体代码,供大家参考,具体内容如下
创新互联公司长期为成百上千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为平遥企业提供专业的成都网站制作、成都网站设计、外贸营销网站建设,平遥网站改版等技术服务。拥有十余年丰富建站经验和众多成功案例,为您定制开发。
代码:
<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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
网站题目:vue实现带复选框的树形菜单
分享路径:https://www.cdcxhl.com/article42/igscec.html
成都网站建设公司_创新互联,为您提供小程序开发、、网站制作、服务器托管、网站营销、ChatGPT
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联