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: [
              { 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如何实现带复选框的树形菜单就介绍到这了。只有把握现在,才能在明天驰骋风云,只有把握现在,才能充实虚幻的明天,只有把握现在,才能造就明天的辉煌!更多相关vue如何实现带复选框的树形菜单内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

您可能有感兴趣的文章
Vue路由参数的传递与获取方式详细介绍

vue学习记录之动态组件浅析

如何解决ElementUI组件中el-upload上传图片不显示问题

解读element el-upload上传的附件名称不显示 file-list赋值

一篇关于el-table-column的formatter的如何使用及说明