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 相关文章推荐
textContent在Firefox下与innerText等效的属性
May 12 Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
JavaScript基础知识之方法汇总结
Jan 24 Javascript
AngularJS中的API(接口)简单实现
Jul 28 Javascript
微信小程序 LOL 英雄介绍开发实例
Sep 30 Javascript
100多个基础常用JS函数和语法集合大全
Feb 16 Javascript
AngularJs 禁止模板缓存的方法
Nov 28 Javascript
JavaScript+H5实现微信摇一摇功能
May 23 Javascript
vue缓存的keepalive页面刷新数据的方法
Apr 23 Javascript
解决新建一个vue项目过程中遇到的问题
Oct 22 Javascript
JSON stringify方法原理及实例解析
Oct 23 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
如何去掉文章里的 html 语法
2006/10/09 PHP
PHP5中使用DOM控制XML实现代码
2010/05/07 PHP
php实现处理输入转义字符的代码
2015/11/08 PHP
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
情人节之礼 js项链效果
2012/02/13 Javascript
js实现上传图片之上传前预览图片
2013/03/25 Javascript
jQuery中toggle()函数的使用实例
2015/04/17 Javascript
AngularJS中的按需加载ocLazyLoad示例
2017/01/11 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
使用Angular CLI生成路由的方法
2018/03/24 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
Vue+mui实现图片的本地缓存示例代码
2018/05/24 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
JS如何实现封装列表右滑动删除收藏按钮
2020/07/23 Javascript
如何构建 vue-ssr 项目的方法步骤
2020/08/04 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python通过wxPython打开一个音频文件并播放的方法
2015/03/25 Python
Django Highcharts制作图表
2016/08/27 Python
什么是python的id函数
2020/06/11 Python
python 如何停止一个死循环的线程
2020/11/24 Python
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
C#面试题问题集
2016/04/02 面试题
医院实习介绍信
2014/01/12 职场文书
市政施工员自我鉴定
2014/01/15 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
高中历史教学反思
2016/02/19 职场文书
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python
go:垃圾回收GC触发条件详解
2021/04/24 Golang