在 vue 项目中使用 z-tree 树组件

前言：

　　zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。本文主要介绍如何在vue项目中使用ztree插件。

使用步骤：

一、创建Vue项目。（本文主要讲述vue中ztree的用法，所以此处不赘述vue的项目创建）

二、到z-tree官网（http://www.treejs.cn/v3/main.php#_zTreeInfo）里的下载栏去下载ztree的demo项目代码下载，用于vue创建ztree组件时，代码对比使用。

三、在vue项目里创建文件夹，用于存放ztree所需要的各种 .js 和 .css 文件（假设vue项目的名字是work）。

　　ztree文件目录是（数字相同的代表同级文件夹） ：

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

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

　　　　　　　　　　　　　       / ② img / .jpg  （存放节点图标等，存放图片文件）　

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

四、在vue中的 components 中创建 zTree组件。

　　代码可以从之前下载的demo文件拷贝过来，这时需要在ztree官网的demo演示中选择你需要的demo，复制它的文件路径，在下载的demo文件中找出来，拷贝其代码。

因为这里的代码不是符合vue的书写规则的，所有需要修改很多地方。（例如 html中的写法 addHoverDom：addHoverDom，在vue中要写成addHoverDom：this.addHoverDom；html中的函数的写法function addHoverDom(){ }，在vue中要写成 addHoverDom：function(){ } ；等等）

　　不要忘了在组件里引入依赖的 css 和 js 文件：

五、大组件内调用ztree组件。

　　在需要用到ztree组件的大组件内，important引入组件并components实例化，在需要用到的地方写上这个树组件。

六、在router里设置ztree 的路由，和引用它的大组件的路由写成一样。

七、注意：树组件的css和js文件可以在main.js中引入，也可以在组件内引入，个人觉得在组件内引入好一些。

转载于:https://www.cnblogs.com/dts1476788337/p/9092996.html