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

前言

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

优点如下：

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

传送门：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

引入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有一定的了解）。

HTML中