前言

    文章链接:https://tzy1997.com/articles/zt1442re/

    zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发,尤其是 树状菜单、树状数据。

优点如下：

    - zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载

    - 采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀

    - 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器

    - 支持 JSON 数据

    - 支持静态 和 Ajax 异步加载节点数据

    - 支持任意更换皮肤 / 自定义图标（依靠css）

    - 支持极其灵活的 checkbox 或 radio 选择功能

    - 提供多种事件响应回调

    - 灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟

    - 在一个页面内可同时生成多个 Tree 实例

    - 简单的参数配置实现 灵活多变的功能

    传送门：ztree官方文档

效果

    - 单选

    - 多选

步骤

    1. 安装Jquery依赖。

        先安装 JQ 依赖（npm install jquery --save-dev）。

        然后在配置文件 vue.config.js 中的 configureWebpack 写下如下代码:

        configureWebpack: {

            plugins: [

                new webpack.ProvidePlugin({

                    $: "jquery",

                    jQuery: "jquery",

                    "windows.jQuery": "jquery"

                })

            ]

        }

2. 下载 zTree 插件（含 Css 和 Js）。

    下载链接：ztree插件

3. 引入 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";

4. 代码过多，这里展示部分重要代码，如果需要请自行下载下面压缩文件（需要对Vue有一定的了解）。

        - HTML中声明ID为 `targetDom` 的盒子（目标盒子，我这里的`targetDom`命名为`treeCreate`）

       - zTree主要配置

       - 将资源树渲染在目标盒子中

       - 一些主要方法

5. 源文件代码（可能比较复杂）

下载链接：vue文件

    注意：

       这里放了两个重要文件，父组件 `index.vue` ，子组件为 `newStrategy.vue`，文件资源加载是通过接口返回后再挂载资源树上，最主要的方法是 `zTreeOnCheck()` 和 `zTreeOnClick()`。

建议

建议先看下官方提供的 Demo 和 Api文档 ，这样有助于更好地理解 zTree 的使用。

传送门：Demo演示

传送门：Api文档

遇到问题

如果在阅读过程中遇到什么问题 ，请给我留言 ，我会在第一时间内帮助您解决问题 。