最近看了大神的关于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的更多相关文章

  1. 原创《开源一个用 vue 写的树层级组件 vue-ztree》

    最近由于后台管理项目的需要,页面需要制作一个无限树的需求,我第一感就想到了插件 ztree,不过我觉得它太大了,还是自己动手丰衣足食吧. ztree 的 demo 地址:http://www.tree ...

  2. Vue 2.0 右键菜单组件 Vue Context Menu

    Vue 2.0 右键菜单组件 Vue Context Menu https://juejin.im/entry/5976d14751882507db6e839c

  3. 基于bootstrap-treeview做的一个漂亮的无限分类树层级联动菜单

    2017年12月11日09:59:15 因为工作需要把原来的bootstrap-treeview做了一些小改动,方便后台开发人员使用 最终效果,看起来还行,但是其实不是特别友好对用户来说,但是对开发者 ...

  4. 【分享】Vue 资源典藏(UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例)

    Vue 资源典藏,包括:UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和 ...

  5. Vue应用框架整合与实战--Vue技术生态圈篇

    实用框架以及工具 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 Element-UI ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 ...

  6. vue 阿里云上传组件

    vue 阿里云上传组件 Vue.js上传图片到阿里云OSS存储 测试项目git地址 本测试项目启动方法 示例链接 组件配置项 实践解释 本文主要介绍如何 在vue项目中使用web 直传方式上传阿里云o ...

  7. 循序渐进VUE+Element 前端应用开发(8)--- 树列表组件的使用

    在我前面随笔<循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用>里面曾经介绍过一些常规的界面组件的处理,主要介绍到单文本输入框.多文本框.下拉列 ...

  8. 发布自己第一个npm 组件包(基于Vue的文字跑马灯组件)

    一.前言 总结下最近工作上在移动端实现的一个跑马灯效果,最终效果如下: 印象中好像HTML标签的'marquee'的直接可以实现这个效果,不过 HTML标准中已经废弃了'marquee'标签 既然HT ...

  9. 动手实现一个vue中的模态对话框组件

    写在前面 对话框是很常用的组件 , 在很多地方都会用到,一般我们可以使用自带的alert来弹出对话框,但是假如是设计 出的图该怎么办呢 ,所以我们需要自己写一个对话框,并且如果有很多地方都用到,那我们 ...

随机推荐

  1. MHA常用命令

    .查看ssh登陆是否成功 masterha_check_ssh --conf=/etc/masterha/app1.cnf .查看复制是否建立好 masterha_check_repl --conf= ...

  2. 使用Percona监控插件监控MySQL

    1.使用Percona监控插件监控MySQL yum install http://www.percona.com/downloads/percona-release/redhat/0.1-3/per ...

  3. Android开发 adb命令提示:Permission denied (转)

    如题:模拟器版本->android 7.1.1 遇到这样的情况把模拟器root一下就好了:su root =============2017年4月3日20:57:33============== ...

  4. nignx部署django

    操作系统:Linux wiki 2.6.32-131.0.15.el6.x86_64 nginx版本: nginx-1.5.7 uwsgi版本:uwsgi-2.0.8 大致流程参考:http://ww ...

  5. 关于ES6的let,const与var之间的三生三世

    首先需要明确的是let.const.var都是用来定义变量的 在ES6之前,我们一般都用var来定义变量,例如 : function test(){ var i=1; console.log(i); ...

  6. memcache 使用方法

    Memcache::add // 添加一个值,如果已经存在,则返回falseMemcache::addServer // 添加Memcache地址Memcache::close // 关闭一个Memc ...

  7. JMeter 通过CSV Data Set Config 中文参数化数据,插入数据库后中文显示乱码,解决办法

    问题描述: 1. 需要设置中文参数化,模拟post请求,通过配置元件 - CSV Data Set Config 进行设置. 2. 数据库数据显示乱码(实际数据为 “测试001”) 解决办法: CSV ...

  8. 【BZOJ3744】Gty的妹子序列 分块+树状数组

    [BZOJ3744]Gty的妹子序列 Description 我早已习惯你不在身边, 人间四月天 寂寞断了弦. 回望身后蓝天, 跟再见说再见…… 某天,蒟蒻Autumn发现了从 Gty的妹子树(bzo ...

  9. 【BZOJ2741】【FOTILE模拟赛】L 分块+可持久化Trie树

    [BZOJ2741][FOTILE模拟赛]L Description FOTILE得到了一个长为N的序列A,为了拯救地球,他希望知道某些区间内的最大的连续XOR和. 即对于一个询问,你需要求出max( ...

  10. Java中线程和线程池

    Java中开启多线程的三种方式 1.通过继承Thread实现 public class ThreadDemo extends Thread{ public void run(){ System.out ...