vue实现带复选框的树形菜单

本文实例为大家分享了某视频剪辑软件实现带复选框的树形菜单展示的具体代码，供大家参考，具体内容如下

代码：

模板div id=' checkTree ' div class=' tree-box ' div class=' zTreeDemoBackground left ' ul id=' tree demo ' class=' ztree '/ul/div/div/div/模板脚本导出默认值{ name: 'checkTree '，组件：{ },数据： function(){ return { settings 3360 { check : } true，nocheckInherit: false }，数据数据： {简单数据：大良造菜单，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。ZnO des)；} }/scriptstyle @import./././plugins/z tree/ZtreeStyle。CSS '；/style以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。