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 相关文章推荐
双击滚屏-常用推荐
Nov 29 Javascript
jquery进行数组遍历如何跳出当前的each循环
Jun 05 Javascript
基于socket.io和node.js搭建即时通信系统
Jul 30 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
May 11 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 Javascript
浅谈Angularjs中不同类型的双向数据绑定
Jul 16 Javascript
React项目动态设置title标题的方法示例
Sep 26 Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 Javascript
Element Rate 评分的使用方法
Jul 27 Javascript
ant design charts 获取后端接口数据展示
May 25 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
配置PHP使之能同时支持GIF和JPEG
2006/10/09 PHP
[转帖]PHP世纪万年历
2006/12/06 PHP
phpStudy 2016 使用教程详解(支持PHP7)
2017/10/18 PHP
一些不错的js函数ajax
2008/08/20 Javascript
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
2014/10/17 Javascript
javascript实现验证IP地址等相关信息代码
2015/05/10 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
在JavaScript中访问字符串的子串
2015/07/07 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
Yarn的安装与使用详细介绍
2016/10/25 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
简单介绍Python的Django框架加载模版的方式
2015/07/20 Python
Python解惑之整数比较详解
2017/04/24 Python
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
详解python里的命名规范
2018/07/16 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
python文件选择对话框的操作方法
2019/06/27 Python
基于Django实现日志记录报错信息
2019/12/17 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
python空元组在all中返回结果详解
2020/12/15 Python
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
家长会演讲稿范文
2014/01/10 职场文书
高中历史教学反思
2014/02/08 职场文书
根德5570型九灯四波段立体声收音机是电子管收音机的楷模 ? 再论5570
2022/04/05 无线电
postgreSQL数据库基础知识介绍
2022/04/12 PostgreSQL
Java中的Kotlin 内部类原理
2022/06/16 Java/Android