插件资源及api:树官网

本事例是在vue3.0+中演示,事例是实际项目中正在用的组件所以部分打了马赛克。

1、插件准备(提前准备好插件文件)

可以直接在官网下载,搭建好脚手架后将准备好的文件放在libs文件夹(也可以放在自己资源的文件夹)

2、下载jQuery依赖

npm install jquery --save-dev

3、在组件中引入相关依赖和文件

4、开始,先写标签部分

<template>
<div>
<ul id="treeDemo" class="ztree" @select="zTreeOnClick"></ul>
</div>
</template>

官网demo是

<ul id="treeDemo" class="ztree"></ul>

我加的@select="zTreeOnClick"是树的点击事件 点击事件配置下面就是

5、配置

配置都是写在data()里的,setting就是树的配置,我们一共写了三个配置:treeId是定义树的id的属性值,name是节点数据保存节点名称的属性名称,onClick就是树的点击事件。zNodes就是树的节点数据。

我只截一部分,大致就是这样一个数据格式。iconSkin是树的自定义图标,后面会说。

6、树的初始化,创建树

我是写在mounted()里的,init()就是树初始化方法里面有三个参数,第一个ztree树的容器,第二个树配置,第三个树的节点数据,expandAll()方法是树节点的展开/折叠。

mounted(){
$.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes).expandAll(true);
},

7、至此我们就可以看到我们的树了

8、报错解决

部分人在上面代码完全一致的时候会打开页面树并没有显示而是如图报错了

也有报 $ is not defined 的其实两个错误都是一个意思解决方法需要我们配置一下:

vue3.0+的脚手架目录中的配置文件vue.config.js文件,加上红框内的配置即可。

 9、最后就是自定义图标了

我们在第五部配置的时候在节点数据中加入了iconSkin来设置自定义图片。

/deep/ .ztree li span.button.key0_ico_close{
background: url(../../assets/img/treeicon00.png) no-repeat center;
background-size: 100% 100%;
}
/deep/ .ztree li span.button.key0_ico_open{
background: url(../../assets/img/treeicon01.png) no-repeat center;
background-size: 90% 90%;
}
/deep/ .ztree li span.button.key1_ico_docu{
background: url(../../assets/img/treeicon1.png) no-repeat center;
background-size: 90% 90%;
}

/deep/ 是代表样式仅在本文件中起效

.ztree li span.button 是固定的不加的话可能找不到

.key0 是我们iconSkin的名字

_ico_close 节点折叠时的图标

_ico_open 节点展开时的图标

_ico_docu 图标一致时用docu

如图我们箭头标记的地方用的是折叠展开两种图标剩下的图标都是固定的

10、点击事件

methods: {
zTreeOnClick(event, treeId, treeNode) {
console.log(treeNode);
}
}

点击场地场所时:

在vue中使用ztree树插件的更多相关文章

  1. easyui&8Jquery ztree树插件

    7Jquery easyui前台UI框架 开发包: 7.1Layout页面布局 将课后资料中后台系统前台页面素材导入项目中 1.导入Jquery,easyui相关js,css文件 <link r ...

  2. JQuery Ztree 树插件配置与应用小结

    JQuery Ztree 树插件配置与应用小结 by:授客 QQ:1033553122 测试环境 Win7 jquery-3.2.1.min.js 下载地址: https://gitee.com/is ...

  3. vue中自定义组件(插件)

    vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...

  4. 树结构数据的展示和编辑-zTree树插件的简单使用

    最近在项目当中遇到一个需求,需要以树结构的方式展示一些数据,并可对每一个树节点做内容的编辑以及树节点的添加和删除,刚好听说有zTree这个插件可以实现这样的需求,所以在项目的这个需求完成之后,在博客里 ...

  5. vue中使用better-scroll滚动条插件

    应用场景: overflow: hidden会让超出的部分隐藏,并且无法拖拽,所以可使用插件让长列表限定的区域滚动拖拽. 参考:https://zhuanlan.zhihu.com/p/2740702 ...

  6. vue中使用剪切板插件 clipboard.js

    vue中使用剪切板需要借助一个插件,clipboard,使用方法还是很简单的,先下载,然后引入: npm i clipboard -S //引入 import Clipboard from 'clip ...

  7. Jquery ztree树插件2

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  8. vue中登录模块的插件封装

    一个电商城的项目,场景是:在未登录的情况下点击收藏或者加入购物车等操作,执行一个方法如this.$login()来动态插入登录组件. 第一步:写好关于这个登录弹窗的单文件组件 loginBox.vue ...

  9. zTree树插件动态加载

    需求: 由于项目中家谱图数据量超大,而一般加载方式是通过,页面加载时 zTree.init方法进行数据加载,将所有数据一次性加载到页面中.而在项目中家谱级别又非常广而深,成千上万级,因此一次加载,完全 ...

随机推荐

  1. 题解 P3205 【[HNOI2010]合唱队】

    讲讲我的做法 看了题目发现要用区间\(dp\),为什么? 我们发现区间\(dp\)有一个性质--大区间包涵小区间,这道题就符合这样的一个性质 所以我们要用区间\(dp\)来解决这道题. 如何设计状态 ...

  2. 如何使用 electron 屏幕或摄像头录制并保存到本地

    思路分析 通过 electron desktopCapturer 和 navigator 获取要进行录制的媒体源信息: 使用 MediaRecorder 对视频流进行录制: 将 MediaRecord ...

  3. 比CNN表现更好,CV领域全新卷积操作OctConv厉害在哪里?

    CNN卷积神经网络问世以来,在计算机视觉领域备受青睐,与传统的神经网络相比,其参数共享性和平移不变性,使得对于图像的处理十分友好,然而,近日由Facebook AI.新家坡国立大学.360人工智能研究 ...

  4. HTTP下午茶 - 小白入门书

    这本书十分精炼,非常适合零基础的小白. 资源介绍 首先,书籍是免费的! 英文原版书籍,作者是 Launch School,是一家教育网站,可以在线阅读: https://launchschool.co ...

  5. Selenium系列(十六) - Web UI 自动化基础实战(3)

    如果你还想从头学起Selenium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1680176.html 其次,如果你不懂前端基础知识, ...

  6. [React]Hook初探

    Hook是什么 Hook是React从16.8开始支持的特性,使用Hook可以在不使用class时使用state Hook支持在不需要修改组件状态的情况下复用逻辑状态,从而解决使用render pro ...

  7. iOS 性能优化点

    用 ARC 管理内存 在正确的地方使用 reuseIdentifier 尽量把 views 设置为完全不透明 如果你有透明的 Views 你应该设置它们的 opaque(不透明)属性为 YES.例如一 ...

  8. 一次作业过程及其问题的记录:mysql建立数据库、建表、查询和插入等

    前言 这次的作业需要我建立一个小的数据库. 这次作业我使用了mysql,进行了建库.建表.查询.插入等操作. 以下是对本次作业相关的mysql操作过程及过程中出现的问题的记录. 正文 作业中对数据库的 ...

  9. 如何让Java应用成为杀不死的小强?(中篇)

    各位坐稳扶好,我们要开车了.不过在开车之前,我们还是例行回顾一下上期分享的要点. 上期我们抛了一个砖:“如何实现 Java 应用进程的状态监控,如果被监控的进程 down 掉,是否有机制能启动起来?” ...

  10. js中使用Timer来计时程序执行时 - [javascript] - [开发]

    在我们开发过程中,我们也在不断的学习,以及优化自己的代码质量. 我们时常需要一个计时器,来对代码某段或者某些段执行进行计时,以评估代码运行质量,考虑是否优化. 以及优化后的直观对比. JavaScri ...