vue中使用zTree实现文件多选

精选原创

一只大傻雕 2022-08-09 10:48:06 博主文章分类：Vue ©著作权

文章标签 jquery css 数据 vue ztree 文章分类 前端开发 yyds干货盘点

©著作权归作者所有：来自51CTO博客作者一只大傻雕的原创作品，请联系作者获取转载授权，否则将追究法律责任

前言

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

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

优点如下：

zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载
采用了延迟加载技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀
兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
支持 JSON 数据
支持静态和 Ajax 异步加载节点数据
支持任意更换皮肤 / 自定义图标（依靠css）
支持极其灵活的 checkbox 或 radio 选择功能
提供多种事件响应回调
灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
在一个页面内可同时生成多个 Tree 实例
简单的参数配置实现灵活多变的功能

传送门： ztree官方文档

效果

单选

vue中使用zTree实现文件多选_vue

vue中使用zTree实现文件多选_jquery_02

多选

vue中使用zTree实现文件多选_jquery_03

步骤

安装Jquery依赖。
先安装 JQ 依赖（npm install jquery --save-dev）。
然后在配置文件vue.config.js 中的configureWebpack 写下如下代码:

configureWebpack: {

            plugins: [

                new webpack.ProvidePlugin({

                    $: "jquery",

                    jQuery: "jquery",

                    "windows.jQuery": "jquery"

                })

            ]

        }

如图所示：

vue中使用zTree实现文件多选_jquery_04

下载 zTree 插件（含 Css 和 Js）。下载链接：ztree插件
引入 zTree 插件
先看下我的目录结构，每个人的风格可能千差万别（plugins 可以改成任何名字，不过一般插件类的我习惯命名为plugins）。

vue中使用zTree实现文件多选_vue_05

在入口文件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中使用zTree实现文件多选_jquery_06