Vue2组件tree实现无限级树形菜单


Posted in Javascript onMarch 29, 2017

一直打算偷懒使用个现成的树组件,但是在github上找了一大圈没有找到真正满足应用开发的树组件,所以没办法只能自己写了一个,开源出来希望可以帮助到需要的人,同时如果大家觉得好用,我可以顺带骗骗★(希望喜欢的朋友对我体力的肯定可以点下★ ),由于我也算刚接触vue,所以难免有所考虑不周的地方,希望大家在issue里面指正。组件重点是父子组件数据的共享和状态保持,我是利用了下vuex的思路,采用一个控制仓库完成。

github 地址 vue-tree

How to run demo

npm install
npm run dev

效果图

Vue2组件tree实现无限级树形菜单

示例

<template>
 <div style="width:300px;">
 <tree ref ='tree' :treeData="treeData" :options="options" @node-click='handleNode'/>
 </div>
</template>
<script>
import Tree from '../components/tree/tree.vue'
export default {
 name: 'test',
 data () {
 return {
  options: {
  showCheckbox: true,
  search: {
   useInitial: true,
   useEnglish: false,
   customFilter: null
  }
  },
  treeData: [
  {
   id: 1,
   label: '一级节点',
   open: true,
   checked: false,
   parentId: null,
   visible: true,
   searched: false,
   children: [
   {
    id: 2,
    label: '二级节点-1',
    checked: false,
    parentId: 1,
    searched: false,
    visible: true
   },
   {
    label: '二级节点-2',
    open: true,
    checked: false,
    id: 3,
    parentId: 1,
    visible: true,
    searched: false,
    children: [
    {
     id: 4,
     parentId: 3,
     label: '三级节点-1',
     visible: true,
     searched: false,
     checked: false
    },
    {
     id: 5,
     label: '三级节点-2',
     parentId: 3,
     searched: false,
     visible: true,
     checked: false
    }
    ]
   },
   {
    label: '二级节点-3',
    open: true,
    checked: false,
    id: 6,
    parentId: 1,
    visible: true,
    searched: false,
    children: [
    {
     id: 7,
     parentId: 6,
     label: '三级节点-4',
     checked: false,
     searched: false,
     visible: true
    },
    {
     id: 8,
     label: '三级节点-5',
     parentId: 6,
     checked: false,
     searched: false,
     visible: true
    }
    ]
   }
   ]
  }
  ]
 }
 },
 components: {Tree}
}
</script>

属性

 Vue2组件tree实现无限级树形菜单

options: {
  showCheckbox: true, //是否支持多选
  search: {
   useInitial: true, //是否支持首字母搜索
   useEnglish: false, //是否是英文搜索
   customFilter: null // 自定义节点过滤函数
  }

 /* 节点元素 */
 {
  id: 1, //节点标志
  label: '一级节点', //节点名称
  open: true, // 是否打开节点
  checked: false, //是否被选中
  parentId: null, //父级节点Id
  visible: true, //是否可见
  searched: false, //是否是搜索值
  children: [] //子节点
 }

方法

Vue2组件tree实现无限级树形菜单

事件

Vue2组件tree实现无限级树形菜单

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

Javascript 相关文章推荐
JavaScript 组件之旅(二)编码实现和算法
Oct 28 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
Apr 16 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
Apr 20 Javascript
在JavaScript中构建ArrayList示例代码
Sep 17 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
Nov 09 Javascript
Angular ng-repeat指令实例以及扩展部分
Dec 26 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
canvas绘图不清晰的解决方案
Feb 28 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
详解Vue2.0组件的继承与扩展
Nov 23 Javascript
JS异步处理的进化史深入讲解
Aug 25 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 #Javascript
Vue.js 插件开发详解
Mar 29 #Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 #Javascript
整理关于Bootstrap模态弹出框的慕课笔记
Mar 29 #Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 #Javascript
jQuery插件之validation插件
Mar 29 #jQuery
Vue.js实现移动端短信验证码功能
Mar 29 #Javascript
You might like
我的群发邮件程序
2006/10/09 PHP
PHP_MySQL教程-第一天
2007/03/18 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
关于firefox的ElementTraversal 接口 使用说明
2010/11/11 Javascript
JSON为什么那样红为什么要用json(另有洞天)
2012/12/26 Javascript
JavaScript自动设置IFrame高度的小例子
2013/06/08 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
Javascript基础知识(一)核心基础语法与事件模型
2014/09/29 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
三种方式实现瀑布流布局
2017/02/10 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
JavaScript html5 canvas实现图片上画超链接
2017/10/20 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
js实现简单掷骰子小游戏
2019/10/24 Javascript
Python 闭包的使用方法
2017/09/07 Python
详解Python核心对象类型字符串
2018/02/11 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
python实现启动一个外部程序,并且不阻塞当前进程
2020/12/05 Python
eBay德国站:eBay.de
2017/09/14 全球购物
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
高中毕业的自我鉴定
2013/12/09 职场文书
《三亚落日》教学反思
2014/04/26 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
办公室文员岗位职责
2015/02/04 职场文书
2016年春季运动会广播稿
2015/08/19 职场文书
新兵入伍决心书
2015/09/22 职场文书
Ajax是什么?Ajax高级用法之Axios技术
2021/04/21 Javascript
Fluentd搭建日志收集服务
2022/09/23 Servers
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL