原創《開源一個用 vue 寫的樹層級組件 vue-ztree》

   最近因爲後臺管理項目的須要，頁面須要製做一個無限樹的需求，我第一感就想到了插件 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 的效果，以下圖所示：

  

 

  2: 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