在 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中引入，也能够在组件内引入，我的以为在组件内引入好一些。