vue中使用zTree实现文件多选

前言

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

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中声明ID为 targetDom 的盒子（目标盒子，我这里的targetDom命名为treeCreate）
- zTree主要配置
- 将资源树渲染在目标盒子中
- 一些主要方法
  
  这里放了两个重要文件，父组件 index.vue ，子组件为 newStrategy.vue，文件资源加载是通过接口返回后再挂载资源树上，最主要的方法是 zTreeOnCheck() 和 zTreeOnClick()。

建议

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

传送门： Demo演示

传送门： Api文档

遇到问题

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

vue中使用zTree实现文件多选相关推荐

jquery 加载中_在 vue 中使用 ztree
vue-cli版本:@vue/cli 4.3.1 安装ztree和jquery npm i @ztree/ztree_v3npm i jquery@1.11.3 打开vue.config.js文件,添 ...
vue js 定义对象_JS标准内置对象Proxy及Vue中的proxy.js文件
昔登铜井望法华,葱茏螺黛浮蒹葭.今登法华望铜井,湖水迷茫烟色瞑.-- <登法华寺山顶> Proxy是什么 Proxy是JS标准内置对象中的一个对象.用于创建一个对象的代理.从而实现对对象操 ...
史上最全，在vue中使用zTree实现树型结构
最近做了蛮多需求都是在vue里面去操作dom,着实让人头大需求如下:要求树形结构按照设计稿样式(ztree原本的样式ui接受不了) 鼠标浮动上去的时候,有功能按钮出现,浮在功能按钮上面,出现对应的功 ...
Vue中怎样获取json文件中的数据
场景访问百度音乐API需要传递音乐类型参数,而这些参数是存在musictype.json中, 现在在组件listcate.vue需要获取json数据. json文件内容: 文件位置: 实现 musi ...
vue中如何进行Excel文件的下载
文章目录业务需求: 实现方式 A1.模板下载: A2.搜索下载: A3.勾选下载: A4.上传错误记录下载Excel文件业务需求: Q1.文件批量导入前,需要按照指定的格式与内容上传Excel文件 ...
vue中项目总结及文件夹配置
工作项目中主要的文件夹使用一.主要的文件夹配置 build文件夹: webpack配置文件面是对 webpack 开发和打包的相关设置,包括入口文件.输出文件.使用的模块等 config 文件夹: ...
VUE中IE浏览器下载文件的解决方案
IE浏览器无法通过a标签下载文件 1. 问题 2.解决方案 1. 问题浏览器的兼容性问题一直是个令人头痛的问题,开发的小伙伴应该都比较喜欢用chrome浏览器,兼容性比较强大,而就有些问题发生在其他 ...
在Vue中如何下载各种文件类型(excel、doc、docx)
在项目中难免会遇到将表格中的各种文件下载到电脑本地,但是需要注意的在二次封装api接口时设置responseType:'blob' // 下载handleDownLoad(index, row) { ...
vue中实现图片丶文件上传
html页面 <input type="file" value="" id="file" @change='onUpload'&g ...

vue中使用zTree实现文件多选

前言

效果

步骤

建议

遇到问题

vue中使用zTree实现文件多选相关推荐

最新文章

热门文章