vue实现带复选框的树形菜单实现带复选框的树形菜单
主要为大家详细介绍了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:"业务管理",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: [
评论0