博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
开源一个用 vue 写的树层级组件 vue-ztree
阅读量:4085 次
发布时间:2019-05-25

本文共 634 字,大约阅读时间需要 2 分钟。

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

   ztree 的 demo 地址:

   我拿来了 ztree的样式库,自己动手写的算法,整了一个小而美的 vue-ztree  组件,它基本上能满足我的业务需求,我也希望造福开源社区,打算贡献点微薄之力,就把它开源了。

   概要 :

           1: vue-ztree 的效果图

           2: vue-ztree 的调用方式

           3: vue-ztree 的技术点 

           4: vue-ztree 的开源地址

  

  1: vue-ztree 的效果图

  vue-ztree 的效果,如下图所示:

图一:     图二: 

 

  2: vue-ztree 的调用方式:

  组件写法,如下图:

 

  vue-ztree 的参数讲解:

参数 类型 默认值 描述
list Array - 树的结构数据源
func Function - 点击节点回调的方法
is-open Bealoon true 是否展开树

 

 

 

 

 

 

 3. vue-ztree 的技术点

  vue-ztree的技术点,主要是大量用到了递归算法,以及一些巧妙的编码技巧。

  推荐了解vue 组件树递归知识,地址

 

 4. vue-ztree 的 开源地址

  开源地址:  ,欢迎大家fork,提意见。

  安装运行步骤:

  1: npm install

  2: npm run dev

  看到运行效果如图:

     

 

在寂寞的日子里沉淀自己,在程序的日子里找到自己,我为梦想而坚持!

转载地址:http://fshni.baihongyu.com/

你可能感兴趣的文章
Linux基础教程:CentOS卸载KDE桌面
查看>>
db sql montior
查看>>
read humor_campus
查看>>
IBM WebSphere Commerce Analyzer
查看>>
my read work
查看>>
db db2 base / instance database tablespace container
查看>>
hd disk / disk raid / disk io / iops / iostat / iowait / iotop / iometer
查看>>
project ASP.NET
查看>>
db db2_monitorTool IBM Rational Performace Tester
查看>>
OS + Unix Aix telnet
查看>>
IBM Lotus
查看>>
Linux +Win LAMPP Tools XAMPP 1.7.3 / 5.6.3
查看>>
my read_university
查看>>
network manager
查看>>
OS + Linux Disk disk lvm / disk partition / disk mount / disk io
查看>>
RedHat + OS CPU、MEM、DISK
查看>>
net TCP/IP / TIME_WAIT / tcpip / iperf / cain
查看>>
webServer kzserver/1.0.0
查看>>
OS + Unix IBM Aix basic / topas / nmon / filemon / vmstat / iostat / sysstat/sar
查看>>
my ReadMap subway / metro / map / ditie / gaotie / traffic / jiaotong
查看>>