插件资源及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. [math] Codeforces 597A Divisibility

    题目:http://codeforces.com/problemset/problem/597/A Divisibility time limit per test 1 second memory l ...

  2. [暴力] Educational Codeforces Round 71 (Rated for Div. 2) B. Square Filling (1207B)

    题目:http://codeforces.com/contest/1207/problem/B   B. Square Filling time limit per test 1 second mem ...

  3. [暴力枚举]Codeforces Vanya and Label

    Vanya and Label time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  4. Redis调用lua生成验证码

    场景: ​ 通过微信公众号拿验证码在APP上绑定,为了防止重复,尝试使用reids-lua的方法实现此功能 以下是 php 调用 redis.eval 方法传入的 lua 方法,当然这只是修改后的,保 ...

  5. Win10远程桌面发生身份验证错误,要求的函数不受支持

    昨儿个使用远程桌面,意外发的发现连不上测试环境了.身边的同事也有连不上的.一开始以为是远程机器可能出了问题,但是而后排查确认是自个儿机器问题.原因在与机器前天晚上自动升级了系统补丁,也有部分网友反映了 ...

  6. python中的可变和不可变对象 有序和无序对象

    可变对象和不可变对象的定义:对象存放在地址的值是否可以被改变 不可变对象包括:整形int.浮点型float .字符串str .元祖tuple.布尔型boole 可变对象包括 :列表list.集合set ...

  7. [bzoj1191]超级英雄hero<二分图匹配*匈牙利算法>

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1191 今天随便在bzoj找了一题做,题一读完就发现是个匈牙利算法的裸题,原本以为可以一次过 ...

  8. XDebug的配置和使用

    简介 XDebug是一个开放源代码的PHP程序调试器(即一个Debug工具) 可以用来跟踪,调试和分析PHP程序的运行状况 功能强大的神器,对审计有非常大的帮助. 官网:http://www.xdeb ...

  9. js函数简单调用

    <script> //最简单的调用 //这是JavaScript DOM编程艺术(第2版)关于函数的原码 function convertToCelsius(temp) { var res ...

  10. 实验十一 MySQLl备份与恢复1

    实验十一 MySQL备份与恢复 一.  实验内容: 1. 使用SQL语句导入和导出表数据 2. 使用客户端工具备份还原数据库 3. 使用日志文件恢复数据库 二.  实验项目:学生成绩数据库 创建用于学 ...