一个用 vue 写的树层级组件 vue-ztree
最近看了大神的关于vue-ztree的博客,感觉很赞,于是摘抄下来,方便自己学习,机智girl,哈哈哈O(∩_∩)O
最近由于后台管理项目的需要,页面需要制作一个无限树的需求,我第一感就想到了插件 ztree,不过我觉得它太大了,还是自己动手丰衣足食吧。
ztree 的 demo 地址:http://www.treejs.cn/v3/demo.php
演示地址:
vue-ztree(vue 1.0版本) 演示地址:http://lisiyizu.github.io/vue-ztree/
vue-ztree-2(vue 2.0版本) 演示地址:http://lisiyizu.github.io/vue-ztree-2/
项目地址:
vue-ztree(vue 1.0版本) 演示地址:http://github.com/lisiyizu/vue-ztree
vue-ztree-2(vue 2.0版本) 演示地址:http://github.com/lisiyizu/vue-ztree-2.
我拿来了 ztree的样式库,自己动手写的算法,整了一个小而美的 vue-ztree 组件,它基本上能满足我的业务需求,我也希望造福开源社区,打算贡献点微薄之力,就把它开源了。
概要 :
1: vue-ztree 的效果图
2: vue-ztree 的调用方式
3: vue-ztree 的技术点
1: vue-ztree 的效果图
vue-ztree 的效果,如下图所示:

2: vue-ztree 的调用方式:
组件写法,如下图:

vue-ztree 的参数讲解:
| 参数 | 类型 | 默认值 | 描述 |
| list | Array | - | 树的结构数据源 |
| func | Function | - | 点击节点回调的方法 |
| expand | Function | - | 点击展开/收起的方法(一般在异步加载的时候使用, 非异步加载传null) |
| is-open | Bealoon | true | 是否展开树 |
3. vue-ztree 的技术点
vue-ztree的技术点,主要是大量用到了递归算法,以及一些巧妙的编码技巧。
推荐了解vue 组件树递归知识,地址:https://github.com/vuejs/vue/tree/dev/examples/tree
一个用 vue 写的树层级组件 vue-ztree的更多相关文章
- 原创《开源一个用 vue 写的树层级组件 vue-ztree》
最近由于后台管理项目的需要,页面需要制作一个无限树的需求,我第一感就想到了插件 ztree,不过我觉得它太大了,还是自己动手丰衣足食吧. ztree 的 demo 地址:http://www.tree ...
- Vue 2.0 右键菜单组件 Vue Context Menu
Vue 2.0 右键菜单组件 Vue Context Menu https://juejin.im/entry/5976d14751882507db6e839c
- 基于bootstrap-treeview做的一个漂亮的无限分类树层级联动菜单
2017年12月11日09:59:15 因为工作需要把原来的bootstrap-treeview做了一些小改动,方便后台开发人员使用 最终效果,看起来还行,但是其实不是特别友好对用户来说,但是对开发者 ...
- 【分享】Vue 资源典藏(UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例)
Vue 资源典藏,包括:UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和 ...
- Vue应用框架整合与实战--Vue技术生态圈篇
实用框架以及工具 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 Element-UI ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 ...
- vue 阿里云上传组件
vue 阿里云上传组件 Vue.js上传图片到阿里云OSS存储 测试项目git地址 本测试项目启动方法 示例链接 组件配置项 实践解释 本文主要介绍如何 在vue项目中使用web 直传方式上传阿里云o ...
- 循序渐进VUE+Element 前端应用开发(8)--- 树列表组件的使用
在我前面随笔<循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用>里面曾经介绍过一些常规的界面组件的处理,主要介绍到单文本输入框.多文本框.下拉列 ...
- 发布自己第一个npm 组件包(基于Vue的文字跑马灯组件)
一.前言 总结下最近工作上在移动端实现的一个跑马灯效果,最终效果如下: 印象中好像HTML标签的'marquee'的直接可以实现这个效果,不过 HTML标准中已经废弃了'marquee'标签 既然HT ...
- 动手实现一个vue中的模态对话框组件
写在前面 对话框是很常用的组件 , 在很多地方都会用到,一般我们可以使用自带的alert来弹出对话框,但是假如是设计 出的图该怎么办呢 ,所以我们需要自己写一个对话框,并且如果有很多地方都用到,那我们 ...
随机推荐
- 【Python web自动化】之读取配置文件参数,利用cookie返回值进行跳过验证码进行登录操作
当进行Python的Web自动化时,会涉及到验证码问题,该如何跳过执行呢,下面请看代码: 1.首先新建配置文件*.ini格式 config.ini [db] #基础地址: baseurl = http ...
- Keil 中 Program Size: Code RO-data RW-data ZI-data 所代表的意思
在Keil中编译工程成功后,在下面的Bulid Ouput窗口中会输出下面这样一段信息: Program Size: Code=6320 RO-data=4864 RW-data=44 ZI-data ...
- Mac下python连接mysql数据库
一.下载Mysql官方connector驱动 地址:https://dev.mysql.com/downloads/connector/python/ 根据提示安装.dmg文件即可. 二.验证是否安装 ...
- CSS3 --添加阴影(盒子阴影、文本阴影的使用)
CSS3 - 给div或者文字添加阴影(盒子阴影.文本阴影的使用)CSS3定义了两种阴影:盒子阴影和文本阴影.其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本.下面分别介绍两种 ...
- 【BZOJ】2186 沙拉公主的困惑
一道很有价值的题. [解析1]欧几里德算法求乘法逆元,前缀和 [Analysis]O(T n log n). [Sum] ①int运算.假设会超出界,第一个数前要加上(LL)即类型转换. ②gcd不变 ...
- 【BZOJ4928】第二题 树hash+倍增
[BZOJ4928]第二题 Description 对于一棵有根树,定义一个点u的k-子树为u的子树中距离u不超过k的部分. 注意,假如u的子树中不存在距离u为k的点,则u的k-子树是不存在的. 定义 ...
- hive深入使用
Hive表的创建和数据类型 https://cwiki.apache.org/confluence/display/Hive/Home 管理表和外部的区别 # 管理表 1. 内部表也称之为MANAGE ...
- POJ 2965 The Pilots Brothers' refrigerator【枚举+dfs】
题目:http://poj.org/problem?id=2965 来源:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=26732#pro ...
- 九度OJ 1189:还是约瑟夫环 (约瑟夫环)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:820 解决:522 题目描述: 生成一个长度为21的数组,依次存入1到21: 建立一个长度为21的单向链表,将上述数组中的数字依次存入链表每 ...
- 我的Android进阶之旅------>Android关于ImageSpan和SpannableString的初步了解
最近要实现一个类似QQ聊天输入框,在输入框中可以同时输入文字和表情图像的功能.如下图所示的效果: 为了实现这个效果,先去了解了一下ImageSpan和SpannableString的用法.下面用一个小 ...