Original "open source written by a tree-level component vue vue-ztree"

   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

Guess you like

Origin blog.csdn.net/weixin_34113237/article/details/93428439