最近由于后台管理项目的需要,页面需要制作一个无限树的需求,我第一感就想到了插件 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.0

我拿来了 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. 原创《分享(Angular 和 Vue)按需加载的项目实践优化方案》

    针对前端优化的点有很多,例如:图片压缩,雪碧图,js/css/html 文件的压缩合并,  cdn缓存, 减少重定向, 按需加载 等等 最近有心想针对 ionic项目 和 vue项目,做一个比较大的优 ...

  2. Vue按需加载提升用户体验

    Vue官方文档异步组件: 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了让事情更简单, Vue.js 允许将组件定义为一个工厂函数,动态地解析组件的定义.Vue.js 只在组 ...

  3. vue按需加载组件-webpack require.ensure

    使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash].j ...

  4. vue 按需加载,缓存,导航守卫

    开发中的注意事项:代码性能的优化 1. 减少对第三方的依赖,降低耦合度 2. 加强组件的重复利用率 3. 按需加载 4. 缓存 (尽量发送请求后保存数据) 5. 开发过程中,尽量有着面向对象的思想,这 ...

  5. vue按需加载组件,异步组件

    说实话,我一开始也不知道什么叫按需加载组件,组件还可以按需加载???后来知道了 学不完啊...没关系,看我的 按需加载组件,或者异步组件,主要是应用了component的 is 属性 template ...

  6. 关于VUE首屏加载过长的优化,VUE项目开发优化

    1. 按需引入UI组件 当下市面上流行的UI组件基本都支持按需加载,本文以Element UI为例: (1)     新建一个elementUI.js文件 (2)     访问地址找到按需引入方式的说 ...

  7. vue 按需加载

    vue 构建单页面应用,但是问题是随着系统的体积变大,js文件也体积太大了,这时候就需要按需要进行加载了 vue-router提供了懒加载的方式 const Foo = resolve => r ...

  8. 三步解决 vue 按需加载

    1  webpack 的 output 配置 chunkFleName 树干名称: " chunks/[name]-[chunkhash:8].js  " 这一步是配合第三步, 生 ...

  9. vue中的懒加载和按需加载

    懒加载 (1)定义:懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. (2)异步加载的三种表示方法: 1. resolve => require([URL], resolve),支持性好 ...

  10. requirejs按需加载angularjs文件

    之前分享了一篇用ocLazyLoad实现按需加载angular js文件的博客.本来当时想会使用一种方法就行了.可最近刚好有时间,在网上查找了一下requirejs实现angular js文件按需加载 ...

随机推荐

  1. day29 二十九、元类、单例

    一.eval.exec内置函数 1.eval函数 eval内置函数的使用场景: ①执行字符串会得到相应的执行结果 ②一般用于类型转换得到dict.list.tuple等 2.exec函数 exec应用 ...

  2. linux磁盘大小获取和文件大小获取

    一.获取磁盘大小(给入的是文件夹绝对路径):check_disk_available(QString path) { struct statfs diskinfo; unsigned long lon ...

  3. 新建的小程序没有app.js,app.json等文件

    因为在创建的时候没有勾选 建立普通快速启动模板,而我在创建的时候没有发现有这个选项可以选择. 解决办法:把之前创建过的文件夹整个删掉,不能只删内容.然后再重新新建项目,就会出现  建立普通快速启动模板 ...

  4. Cookie/Session的机制与安全

    转载自:https://harttle.land/2015/08/10/cookie-session.html Cookie和Session是为了在无状态的HTTP协议之上维护会话状态,使得服务器可以 ...

  5. 【LeetCode每天一题】Unique Paths(唯一的路径数)

    A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below).The ...

  6. hook

    hook的定义 hook,钩子,勾住系统的程序逻辑. 在某段SDK源码逻辑执行的构成中,通过代码手段拦截执行该程序,加入自己的代码逻辑 使用价值 hook是安卓面向切面(aop)编程的基础,可以让我们 ...

  7. 解决centos7.x图形化界面卡死(鼠标能动,但不能点击)问题

    有时会由于某些原因(CPU过热?Mem占用过高?)导致centos7.x图形界面卡死,下面是解决办法,此方法不会关闭你打开的terminal. 1. 首先top命令查看gnome-shell的PID ...

  8. JavaScript 当前URL取参返回字典

    getParam : function(){ return (key, strURL = window.location.search) => new RegExp("(^|\\?|& ...

  9. NetCore2.0下使用EF CodeFirst创建数据库

    本文所使用的VS版本:VS2017 15.3.0 首先新建一个.net core项目  取名NetCoreTask 使用模型视图控制器方式 新建Model层 在Model层下新建一个user实体类 1 ...

  10. PHP 面向对象之单例模式-有些类也需要计划生育

    一个类只有一个实例对象 1.含义 作为对象的创建模式,单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统全局的提供这个实例.它不会创建实例副本,而是会向单例类内部存储的实例返回一个引用. 2 ...