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


Posted in Javascript onMay 27, 2019

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
淘宝搜索框效果实现分析
Mar 05 Javascript
Chrome Form多次提交表单问题的解决方法
May 09 Javascript
stream.js 一个很小、完全独立的Javascript类库
Oct 28 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
Apr 07 Javascript
JS+CSS实现下拉列表框美化效果(3款)
Aug 15 Javascript
JavaScript事件学习小结(三)js事件对象
Jun 09 Javascript
关于List.ToArray()方法的效率测试
Sep 30 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 Javascript
Vue之mixin全局的用法详解
Aug 22 Javascript
了解JavaScript中let语句
May 30 Javascript
解决webpack多页面内存溢出的方法示例
Oct 08 Javascript
vue实现按需加载组件及异步组件功能
May 27 #Javascript
Vue实现导航栏点击当前标签变色功能
Aug 19 #Javascript
原生js实现each方法实例代码详解
May 27 #Javascript
深入学习JavaScript中的bom
May 27 #Javascript
Vue实现根据hash高亮选项卡
May 27 #Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 #Javascript
Vue使用localStorage存储数据的方法
May 27 #Javascript
You might like
php socket方式提交的post详解
2008/07/19 PHP
php判断电脑访问、手机访问的例子
2014/05/10 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
php字符串替换函数substr_replace()用法实例
2015/03/17 PHP
php使用Jpgraph创建折线图效果示例
2017/02/15 PHP
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
Javascript学习笔记 delete运算符
2011/09/13 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
一个简单的Node.js异步操作管理器分享
2014/04/29 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
2015/04/17 Javascript
轻量级的原生js日历插件calendar.js使用指南
2015/04/28 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
JavaScript学习笔记之创建对象
2016/03/25 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
js轮播图的插件化封装详解
2017/07/17 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
angular ng-model 无法获取值的处理方法
2018/10/02 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
Node 模块原理与用法详解
2020/05/13 Javascript
python判断端口是否打开的实现代码
2013/02/10 Python
在Python中使用第三方模块的教程
2015/04/27 Python
Python面向对象基础入门之设置对象属性
2018/12/11 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
Python大批量搜索引擎图像爬虫工具详解
2020/11/16 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
《乌鸦喝水》教学反思
2016/02/19 职场文书