Recently due to the need of project management background, pages need to produce an infinite tree needs, I think the first feeling plug ztree, but I think it's too big, it still clothed yourself.
ztree the demo Address: http://www.treejs.cn/v3/demo.php
Demo Address:
vue-ztree (vue version 1.0) demonstrates Address: http://lisiyizu.github.io/vue-ztree/
vue-ztree-2 (vue version 2.0) demonstrates Address: http://lisiyizu.github.io/vue-ztree-2/
project address:
vue-ztree (vue version 1.0) demonstrates Address: http://github.com/lisiyizu/vue-ztree
vue-ztree-2 (vue version 2.0) demonstrates Address: http://github.com/lisiyizu/vue-ztree-2.0
I brought ztree style library to write their own algorithms, the whole of a small but beautiful vue-ztree components, which can basically meet my business needs, I also hope that the benefit of the open source community, intends to contribute something modest, put it open source.
Overview :
1: vue-ztree renderings
2: Call the way vue-ztree
3: vue-ztree technical point
1: vue-ztree renderings
Vue-ztree the effect, as shown below:
2: vue-ztree called by:
Writing assembly, as shown below:
vue-ztree explain the parameters:
parameter | Types of | Defaults | description |
list | Array | - | Tree structure data source |
func | Function | - | 点击节点回调的方法 |
expand | Function | - | 点击展开/收起的方法(一般在异步加载的时候使用, 非异步加载传null) |
is-open | Bealoon | true | 是否展开树 |
3. vue-ztree 的技术点
vue-ztree的技术点,主要是大量用到了递归算法,以及一些巧妙的编码技巧。
推荐了解vue 组件树递归知识,地址:https://github.com/vuejs/vue/tree/dev/examples/tree
转载于:https://www.cnblogs.com/Kummy/p/6016844.html