zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发,尤其是 树状菜单、树状数据。
优点如下:
传送门:ztree官方文档
安装Jquery依赖。
先安装 JQ 依赖(npm install jquery --save-dev
)。
然后在配置文件vue.config.js
中的configureWebpack
写下如下代码
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"windows.jQuery": "jquery"
})
]
},
下载zTree
插件(含 Css 和 Js)。
引入zTree
插件
先看下我的目录结构,每个人的风格可能千差万别(plugins 可以改成任何名字,不过一般插件类的我习惯命名为plugins)。
在入口文件main.js
中引入 css 和 js。
import "@/plugins/ztree/js/jquery-3.2.1.min";
import "@/plugins/ztree/js/jquery.ztree.core.js";
import "@/plugins/ztree/js/jquery.ztree.excheck";
import "@/plugins/ztree/css/zTreeStyle/zTreeStyle.css";
代码过多,这里展示部分重要代码,如果需要请自行下载下面压缩文件(需要对Vue有一定的了解)。
targetDom
的盒子(目标盒子,我这里的targetDom
命名为treeCreate
)源文件代码(可能比较复杂)
注意:
这里放了两个重要文件,父组件 index.vue
,子组件为 newStrategy.vue
,文件资源加载是通过接口返回后再挂载资源树上,最主要的方法是 zTreeOnCheck()
和 zTreeOnClick()
。
建先看下官方提供的 Demo 和 Api文档 ,这样有助于更好地理解 zTree 的使用。
如果在阅读过程中遇到什么问题 ,请在 评论区 留言 ,我会在第一时间内帮助您解决问题 。