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

时间:2022-05-27 02:00:30

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

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

2: vue-ztree 的调用方式:

组件写法,如下图:

 原创《开源一个用 vue 写的树层级组件 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

    最近看了大神的关于vue-ztree的博客,感觉很赞,于是摘抄下来,方便自己学习,机智girl,哈哈哈O(∩_∩)O 最近由于后台管理项目的需要,页面需要制作一个无限树的需求,我第一感就想到了插件 z ...

  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应用框架整合与实战--Vue技术生态圈篇

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

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

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

  6. vue 阿里云上传组件

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

  7. Log4J是Apache组织的开源一个开源项目,通过Log4J,可以指定日志信息输出的目的地,如console、file等。Log4J采用日志级别机制,请按照输出级别由低到高的顺序写出日志输出级别。

    Log4J是Apache组织的开源一个开源项目,通过Log4J,可以指定日志信息输出的目的地,如console.file等.Log4J采用日志级别机制,请按照输出级别由低到高的顺序写出日志输出级别. ...

  8. 用ES6的class模仿Vue写一个双向绑定

    原文地址:用ES6的class模仿Vue写一个双向绑定 点击在线尝试一下 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods cla ...

  9. 用vue写一个仿简书的轮播图

    原文地址:用vue写一个仿简书的轮播图 先展示最终效果: Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮 ...

随机推荐

  1. 使用Apache Bench进行压力测试

    Apache Bench是Apache中自带的压力测试工具 在linux中我们安装好apache后可以通过ab指令使用它 格式:ab [参数] [http://]ip地址/path/ 常用参数说明: ...

  2. Oracle 收缩表大小 Oracle Shrink Table --转载

    从10g开始,oracle开始提供Shrink的命令,假如我们的表空间中支持自动段空间管理 (ASSM),就可以使用这个特性缩小段,即降低HWM.这里需要强调一点,10g的这个新特性,仅对ASSM表空 ...

  3. Session变量不能传送到下一页.解决: session.use_trans_sid = 1

    转自:http://blog.csdn.net/drylandfish/article/details/244085 附:文摘===================================== ...

  4. kbengine mmo源码(完整服务端源码+资源+完整客户端源码)

      本项目作为kbengine服务端引擎的客户端演示而写 更新kbengine插件库(https://github.com/kbengine/kbengine_unity3d_plugins):    ...

  5. HttpClient使用笔记

    使用版本为4.5.1 常用API: 1.获取网页内容:InputStream in = response.getEntity().getContent() 2.获取状态码:response.getSt ...

  6. Apache服务

    Apache服务的安装: Apache服务程序的软件包名称是:httpd 安装方法: rpm软件包安装.源码编译安装.yum安装 yum install httpd 安装完成后启动: revice h ...

  7. 【Eclipse】web项目部署新手篇

    本文属于新手篇章,记录了Eclipse中部署web项目的步骤 1 . 添加Tomcat服务器 右键项目属性-->Run as-->Run on server弹出以下界面 点击finish之 ...

  8. 快速理解VirtualBox的四种网络连接方式

    VirtualBox中有4中网络连接方式: NAT Bridged Adapter Internal Host-only Adapter VMWare中有三种,其实他跟VMWare 的网络连接方式都是 ...

  9. Linux 修改linux的SSH的默认端口

    修改linux的SSH的默认端口 by:授客 QQ:1033553122 安装完linux后,默认的情况下ssh是开放的,容易造到黑客攻击,简单有效的操作之一就是修改默认端口号   步骤一:修改/et ...

  10. FILE 文件的使用 (VC、BCB、Qt)

    FILE * fp ;AnsiString filePath="";fp= fopen(filePath.c_str(),"wb");//第二个参数是文件打开方 ...