在vue中使用ztree树插件
插件资源及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树插件的更多相关文章
- easyui&8Jquery ztree树插件
7Jquery easyui前台UI框架 开发包: 7.1Layout页面布局 将课后资料中后台系统前台页面素材导入项目中 1.导入Jquery,easyui相关js,css文件 <link r ...
- JQuery Ztree 树插件配置与应用小结
JQuery Ztree 树插件配置与应用小结 by:授客 QQ:1033553122 测试环境 Win7 jquery-3.2.1.min.js 下载地址: https://gitee.com/is ...
- vue中自定义组件(插件)
vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...
- 树结构数据的展示和编辑-zTree树插件的简单使用
最近在项目当中遇到一个需求,需要以树结构的方式展示一些数据,并可对每一个树节点做内容的编辑以及树节点的添加和删除,刚好听说有zTree这个插件可以实现这样的需求,所以在项目的这个需求完成之后,在博客里 ...
- vue中使用better-scroll滚动条插件
应用场景: overflow: hidden会让超出的部分隐藏,并且无法拖拽,所以可使用插件让长列表限定的区域滚动拖拽. 参考:https://zhuanlan.zhihu.com/p/2740702 ...
- vue中使用剪切板插件 clipboard.js
vue中使用剪切板需要借助一个插件,clipboard,使用方法还是很简单的,先下载,然后引入: npm i clipboard -S //引入 import Clipboard from 'clip ...
- Jquery ztree树插件2
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- vue中登录模块的插件封装
一个电商城的项目,场景是:在未登录的情况下点击收藏或者加入购物车等操作,执行一个方法如this.$login()来动态插入登录组件. 第一步:写好关于这个登录弹窗的单文件组件 loginBox.vue ...
- zTree树插件动态加载
需求: 由于项目中家谱图数据量超大,而一般加载方式是通过,页面加载时 zTree.init方法进行数据加载,将所有数据一次性加载到页面中.而在项目中家谱级别又非常广而深,成千上万级,因此一次加载,完全 ...
随机推荐
- 网维大师无盘刷新B盘方法
- [树的度数] Christmas Spruce
Consider a rooted tree. A rooted tree has one special vertex called the root. All edges are directed ...
- Django 视图笔记
视图 概述 作用:视图接受web请求,并响应 本质:python中的一个函数 响应: 网页;重定向:错误视图(404.500) json数据 url配置 配置流程 1:指定根基url配置文件 sett ...
- 简述UDF/UDAF/UDTF是什么,各自解决问题及应用场景
UDF User-Defined-Function 自定义函数 .一进一出: 背景 系统内置函数无法解决实际的业务问题,需要开发者自己编写函数实现自身的业务实现诉求. 应用场景非常多,面临的业务不同导 ...
- FtpServer穿透内网访问配置踩笔记
FtpServer穿透内网访问配置踩笔记 引言 FtpServer是服务器文件远程管理常用方式. 以前在局域网配置Ftp服务器以及使用公网上的Ftp服务均未碰到问题,固未对Ftp传输进行深入了解. 然 ...
- 干货 | NLP算法岗大厂面试经验与路线图分享
最近有好多小伙伴要面经(还有个要买简历的是什么鬼),然鹅真的没有整理面经呀,真的木有时间(。 ́︿ ̀。).不过话说回来,面经有多大用呢?最起码对于NLP岗位的面试来说,作者发现根本不是面经中说的样子 ...
- Rasa Stack:创建支持上下文的人工智能助理和聊天机器人教程
相关概念 Rasa Stack 是一组开放源码机器学习工具,供开发人员创建支持上下文的人工智能助理和聊天机器人: • Core = 聊天机器人框架包含基于机器学习的对话管理 • NLU = 用于自然语 ...
- Jmeter4.0接口测试之断言实战(六)
在接口测试用例中得有断言,没有断言的接口用例是无效的,一个接口的断言有三个层面,一个是HTTP状态码的断言,另外一个是业务状态码的断言,最后是某一接口请求后服务端响应数据的断言.在Jmeter中增加断 ...
- .Net微服务实践(三):Ocelot配置路由和请求聚合
目录 配置 路由 基本配置 占位符 万能模板 优先级 查询参数 请求聚合 默认聚合 自定义聚合 最后 在上篇.Net微服务实践(二):Ocelot介绍和快速开始中我们介绍了Ocelot,创建了一个Oc ...
- 运输问题中产销不平衡问题(表上作业法和LINGO方法)
对于产销不平衡问题有两种情况: 供大于求(产大于销)→增加虚拟销地 供不应求(产小于销)→增加虚拟产地 例如以下例题: 这个题中,总产量为55,总销量为60,故而我们知道这个问题属于供不应求. 1.这 ...