在 vue 項目中使用 z-tree 樹組件

前言：

　　zTree 是一個依靠 jQuery 實現的多功能 「樹插件」。優異的性能、靈活的配置、多種功能的組合是 zTree 最大優勢。本文主要介紹如何在vue項目中使用ztree插件。

使用步驟：

1、建立Vue項目。（本文主要講述vue中ztree的用法，因此此處不贅述vue的項目建立）

2、到z-tree官網（http://www.treejs.cn/v3/main.php#_zTreeInfo）裏的下載欄去下載ztree的demo項目代碼下載，用於vue建立ztree組件時，代碼對比使用。

3、在vue項目裏建立文件夾，用於存放ztree所須要的各類 .js 和 .css 文件（假設vue項目的名字是work）。

　　ztree文件目錄是（數字相同的表明同級文件夾） ：

　　　　work / plugins / ① ztree  / ② css / .css （ztree的各個css文件）

　　　　　　　　　　　　　       / ②  js   / .js（ztree的各個js文件）

　　　　　　　　　　　　　       / ② img / .jpg  （存放節點圖標等，存放圖片文件）　

　　　　　　　　　　 / ① jq.min.js （jquery文件）

4、在vue中的 components 中建立 zTree組件。

　　代碼能夠從以前下載的demo文件拷貝過來，這時須要在ztree官網的demo演示中選擇你須要的demo，複製它的文件路徑，在下載的demo文件中找出來，拷貝其代碼。

由於這裏的代碼不是符合vue的書寫規則的，全部須要修改不少地方。（例如 html中的寫法 addHoverDom：addHoverDom，在vue中要寫成addHoverDom：this.addHoverDom；html中的函數的寫法function addHoverDom(){ }，在vue中要寫成 addHoverDom：function(){ } ；等等）

　　不要忘了在組件裏引入依賴的 css 和 js 文件：

5、大組件內調用ztree組件。

　　在須要用到ztree組件的大組件內，important引入組件並components實例化，在須要用到的地方寫上這個樹組件。

6、在router裏設置ztree 的路由，和引用它的大組件的路由寫成同樣。

7、注意：樹組件的css和js文件能夠在main.js中引入，也能夠在組件內引入，我的以爲在組件內引入好一些。