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 相关文章推荐
JS中style属性
Oct 11 Javascript
js动态调用css属性的小规律及实例说明
Dec 28 Javascript
jquery退出each循环的写法
Feb 26 Javascript
javascript:window.open弹出窗口的位置问题
Mar 18 Javascript
VC调用javascript的几种方法(推荐)
Aug 09 Javascript
快速掌握jQuery插件WebUploader文件上传
Nov 07 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
Feb 16 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
Mar 06 Javascript
JS实现简易刻度时钟示例代码
Mar 11 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
Aug 22 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
Sep 21 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备份/还原MySQL数据库的代码
2011/01/06 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
PHP 中提示undefined index如何解决(多种方法)
2016/03/16 PHP
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
js常用自定义公共函数汇总
2014/01/15 Javascript
JavaScript中检查对象property的存在性方法介绍
2014/12/30 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
2016/05/05 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
js实现文字无缝向上滚动
2017/02/16 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
Angularjs中数据绑定的实例详解
2017/08/25 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
微信小程序上线发布流程图文详解
2019/05/06 Javascript
vue-model实现简易计算器
2020/08/17 Javascript
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
Python tkinter label 更新方法
2018/10/11 Python
python爬取淘宝商品销量信息
2018/11/16 Python
python scrapy爬虫代码及填坑
2019/08/12 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
基于Python实现2种反转链表方法代码实例
2020/07/06 Python
python 如何调用远程接口
2020/09/11 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
Jdbc数据访问技术面试题
2012/03/30 面试题
精神病医院见习报告
2014/11/03 职场文书
2015年社区工作总结
2015/04/08 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书
GPU服务器的多用户配置方法
2022/07/07 Servers