最近由于后台管理项目的需要,页面需要制作一个无限树的需求,我第一感就想到了插件 ztree,不过我觉得它太大了,还是自己动手丰衣足食吧。
我拿来了 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的技术点,主要是大量用到了递归算法,以及一些巧妙的编码技巧。
4. vue-ztree 的 开源地址
安装运行步骤:
1: npm install
2: npm run dev
看到运行效果如图: