最近看了大神的关于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. 精准 iOS 内存泄露检测工具

    MLeaksFinder:精准 iOS 内存泄露检测工具 发表于 2016-02-22   |   zepo   |   23 Comments 背景 平常我们都会用 Instrument 的 Lea ...

  2. Mysql----mysql启动服务时提示"服务名无效"

    1,首先说明一下我的环境,我刚开始是用的XAMPP这个集成的软件,里面安装了apache, mysql,tomcat这些软件,然后通过控制面板对其进行启动关闭的操作,这些操作很方便,但是我就用net ...

  3. Android Studio gradle 文件中 ${supportLibVersion} 用法

    一般我们在项目中的gradle会添加如下库文件 dependencies { compile 'com.android.support:appcompat-v7:23.1.0' compile 'co ...

  4. .Net中多线程类的使用和总结

    lock, Monitor, Thread, Join, BackGroundWorker.   消费者和生产者.Async 委托Invoke TypeHandle中BlockIndex. http: ...

  5. 从sql走向linq的我撞死在起点上

    [本文纯个人理解,错误轻喷,非常希望能有大神指点] A left (outer) join B on A.bid=B.id 上面这句话叫做左连接,原因是left(左)join(加入,连入)被译为左连接 ...

  6. MUI 清除缓存

    mui 清除但是在ios和安卓稍微有点区别, ios可以清除的很彻底,下载文件也能删除: 安卓能清理缓存,但是不能删除下载的文件: plus.cache.calculate(function(size ...

  7. ACboy needs your help(简单DP)

    HDU 1712 Problem Description ACboy has N courses this term, and he plans to spend at most M days on ...

  8. Residual (numerical analysis)

    In many cases, the smallness of the residual means that the approximation is close to the solution, ...

  9. 开发者眼中的Spring与JavaEE

    JavaEE与Spring 在Java社区中,Spring与Java EE之争是个永恒的话题.在这场争论中,来自两个阵营的布道师.架构师 与铁杆粉丝都在不遗余力地捍卫着本方的尊严,并试图说服对方加入到 ...

  10. 洛谷 P1558 色板游戏

    洛谷 题解里面好像都是压位什么的, 身为蒟蒻的我真的不会, 所以就来谈谈我的30颗线段树蠢方法吧! 这题初看没有头绪. 然后发现颜色范围好像只有30: 所以,我就想到一种\(sao\)操作,搞30颗线 ...