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 相关文章推荐
JavaScript 对象模型 执行模型
Dec 06 Javascript
javascript实现复选框选中属性
Mar 25 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
学习JavaScript设计模式之责任链模式
Jan 18 Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 Javascript
ajax接收后台数据在html页面显示
Feb 19 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
May 10 Javascript
AngularJS中使用three.js的实例详解
Jul 21 Javascript
你有必要知道的10个JavaScript难点
Jul 25 Javascript
详解SPA中前端路由基本原理与实现方式
Sep 12 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 Javascript
详解JavaScript之ES5的继承
Jul 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中static关键字原理的学习研究分析
2011/07/18 PHP
php列出一个目录下的所有文件的代码
2012/10/09 PHP
两千行代码的PHP学习笔记汇总
2014/10/05 PHP
JavaScript实现滚动栏效果的方法
2015/04/27 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
PHP模糊查询技术实例分析【附源码下载】
2019/03/07 PHP
实用javaScript技术-屏蔽类
2006/08/15 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
javascript full screen 全屏显示页面元素的方法
2013/09/27 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
js实现TAB切换对应不同颜色的代码
2015/08/31 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
js for循环倒序输出数组元素的实例
2017/03/01 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
详解AngularJs ui-router 路由的简单介绍
2017/04/26 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
微信小程序获取地理位置及经纬度授权代码实例
2019/09/18 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
vue实现广告栏上下滚动效果
2020/11/26 Vue.js
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
使用python编写android截屏脚本双击运行即可
2014/07/21 Python
Python中itertools模块用法详解
2014/09/25 Python
Python代码调试的几种方法总结
2015/04/15 Python
Python基于select实现的socket服务器
2016/04/13 Python
Python中你应该知道的一些内置函数
2017/03/31 Python
Python 实现简单的shell sed替换功能(实例讲解)
2017/09/29 Python
华为2019校招笔试题之处理字符串(python版)
2019/06/25 Python
python通过移动端访问查看电脑界面
2020/01/06 Python
职称自我鉴定
2013/10/15 职场文书
初中校园广播稿
2014/02/02 职场文书
学生喝酒检讨书500字
2014/11/02 职场文书