前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue中使用zTree插件实现文件多选

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

作者头像
唐志远
发布2022-10-27 18:27:13
1.2K0
发布2022-10-27 18:27:13
举报
文章被收录于专栏:FE32 CodeFE32 Code

前言

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

优点如下:

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

传送门:ztree官方文档

效果

  • 单选Your browser does not support the video tag.
  • 多选Your browser does not support the video tag.

步骤

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

代码语言:javascript
复制
configureWebpack: {
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "windows.jQuery": "jquery"
        })
    ]
},

下载zTree插件(含 Css 和 Js)。

下载ztree

引入zTree插件 先看下我的目录结构,每个人的风格可能千差万别(plugins 可以改成任何名字,不过一般插件类的我习惯命名为plugins)。

在入口文件main.js中引入 css 和 js。

代码语言:javascript
复制
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主要配置
  • 将资源树渲染在目标盒子中
  • 一些主要方法

源文件代码(可能比较复杂)

下载vue文件

注意:

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

建议

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

传送门: Demo 演示 传送门: Api 文档

遇到问题

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-05-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 效果
  • 步骤
  • 建议
  • 遇到问题
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档