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 相关文章推荐
js资料prototype 属性
Mar 13 Javascript
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
jquery getScript动态加载JS方法改进详解
Nov 15 Javascript
动态加载jquery库的方法
Feb 12 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
Apr 25 Javascript
javascript实现rgb颜色转换成16进制格式
Jul 10 Javascript
在html中引入外部js文件,并调用带参函数的方法
Oct 31 Javascript
详解Vue demo实现商品列表的展示
May 07 Javascript
js尾调用优化的实现
May 23 Javascript
node.js实现上传文件功能
Jul 15 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 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
re0第二季蕾姆被制作组打入冷宫!艾米莉亚女主扶正,原因唏嘘
2020/04/02 日漫
php实现的支持断点续传的文件下载类
2014/09/23 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
有趣的javascript数组定义方法
2010/09/10 Javascript
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
jQuery实现复选框的全选和反选
2017/02/02 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
Js中async/await的执行顺序详解
2017/09/22 Javascript
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
react 应用多入口配置及实践总结
2018/10/17 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
[02:33]2018DOTA2亚洲邀请赛赛前采访——LGD
2018/04/04 DOTA
Python操作MySQL简单实现方法
2015/01/26 Python
发布你的Python模块详解
2016/09/15 Python
浅析使用Python操作文件
2017/07/31 Python
详解python字节码
2018/02/07 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
Centos部署django服务nginx+uwsgi的方法
2019/01/02 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
Django 创建/删除用户的示例代码
2019/07/24 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
防沙治沙典型材料
2014/05/07 职场文书
校园环保建议书
2014/05/14 职场文书
工作检讨书500字
2014/10/19 职场文书
西湖英语导游词
2015/02/06 职场文书
民主评议党员个人总结
2015/02/13 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书