el-tree 懒加载树
el-tree 懒加载树
- 添加自定义图标
- 指定叶子节点
- 懒加载
<template><div><el-treeclass="filter-tree":data="treeData":props="defaultProps"ref="tree"lazy:load="loadTree":expand-on-click-node="true"@node-click="nodeClick"><span slot-scope="{ node, data }" class="span__"><imgclass="sxtImg"v-if="data.channelId && data.isOnline == 'true'"src="../../../../../assets/image/sxt1.png"alt=""title="设备在线"/><imgclass="sxtImg"v-if="data.channelId && data.isOnline != 'true'"src="../../../../../assets/image/sxt2.png"alt=""title="设备离线"/><span:class="[data.channelId && data.isOnline != 'true' ? 'offline' : 'online',]">{{ node.label }}</span></span></el-tree></div>
</template><script>
import { spTreeList } from "@/utils/api.js";
export default {data() {return {defaultProps: {children: "children",label: "name",isLeaf: (data) => {return data.channelId != null; // ※ 指定哪种情况是最后一级(否则懒加载的树叶子节点前会有展开箭头,需要点一下才消失)},},treeData: [],};},mounted() {},methods: {nodeClick(data, node, comp) {if (data.channelId && data.isOnline != "true") {this.$message.error("当前设备离线!");return;}this.$emit("click", data, node.isLeaf);},// 懒加载加载方法,首次加载树的时候会被触发loadTree(node, resolve) {spTreeList({ orgCode: "" }).then((res) => {// this.rootNode = node;// this.rootResolve = resolve;let rootMainResolve = resolve;let treedata = [];if (node.level == 0) {treedata.push(res.data);return resolve(...treedata);}// 加载子级// if (node.data.isParent && node.data.parentId != "") {// this.getChild(node.data, node.data.parentId, rootMainResolve);// } else {// return resolve([]); // 防止不停转圈// }// 加载子级if (node.data.channelId) {return resolve([]); // 防止不停转圈} else {this.getChild(node.data, node.data.parentId, rootMainResolve);}});},getChild(data, type, resolve) {spTreeList({orgCode: data.id,}).then((res) => {return resolve(res.data);});},// 重新渲染树的根节点resetNode() {spTreeList({ orgCode: "" }).then((res) => {this.treedata = res.data;});},},
};
</script><style lang="scss" scoped>/deep/.el-tree-node__content {background: transparent;}/deep/ .el-tree__empty-block {background: transparent;}/deep/.el-tree {background: transparent;}/deep/.el-tree-node__label {color: #fff;}/deep/.el-tree-node__content:hover,/deep/.el-upload-list__item:hover {background: linear-gradient(90deg,rgba(74, 204, 255, 0.52),rgba(69, 122, 230, 0));position: relative;}/deep/.el-tree-node__content:hover::before {content: "";position: absolute;left: 0;top: 0;background: #4accff;width: 4px;height: 100%;}/deep/ .is-current > .el-tree-node__content {position: relative;background: linear-gradient(90deg,rgba(74, 204, 255, 0.52),rgba(69, 122, 230, 0));/deep/ .is-current > .el-tree-node__content::before {content: "";position: absolute;left: 0px;top: 0;background: #4accff;width: 4px;height: 100%;}}.online {color: #fff;
}
.offline {color: rgba(255, 255, 255, 0.6);
}.sxtImg {vertical-align: middle;margin-right: 5px;
}
</style>相关文章:
el-tree 懒加载树
el-tree 懒加载树 添加自定义图标指定叶子节点懒加载 <template><div><el-treeclass"filter-tree":data"treeData":props"defaultProps"ref"tree"lazy:load"loadTree":expand-on-click-node"true"…...
到江西赣州ibm维修服务器之旅-联想X3850 x6黄灯故障
2023年08月15日,一位江西赣州工厂客户通过朋友介绍与冠峰售前工程师取得联系,双方对产品故障前后原因沟通的大致情况如下: 服务器型号:Lenovo system x3850 x6 为用户公司erp仓库服务器 服务器故障:正常使用过程中业…...
VMware 虚拟机三种网络模式详解
文章目录 前言桥接模式(Bridged)桥接模式特点: 仅主机模式 (Host-only)仅主机模式 (Host-only)特点: NAT网络地址转换模式(NAT)网络地址转换模式(NAT 模式)特点: 前言 很多同学在初次接触虚拟机的时候对 VMware 产品的三种网络模式不是很理解,本文就 VMware 的三种网络模式进行…...
ASP.NET指定变量数据类型,速度提高了100倍
ASP.NET指定变量数据类型,速度提高了100倍由自动编程人工智能 发表在专区 10亿次求余数为0的计算: ASP运行速度130秒左右 ASP.NET Dim i, c, max 如果不指定数据类型,运行要120秒左右 Dim i, c, max As Integer 指定数据类型,运…...
PyArmor 一键加密
使用: pyarmor obfuscate main.py 参考:Python代码加密方案_python加密代码_wgr_1009的博客-CSDN博客 一 简介 PyArmor是用于保护Python代码的工具,它可以将Python脚本编译成加密的字节码,以增加代码的保护性。它的主要目的是防…...
redis--持久化
redis持久化 在 Redis 中,持久化是一种将数据从内存写入到磁盘的机制,以便在服务器重启或崩溃时能够恢复数据。Redis 提供了两种主要的持久化方式:RDB(Redis Database Snapshot)和AOF(Append-Only File&am…...
管理外部表
官方文档地址:Managing Tables 关于外部表 Oracle 数据库允许您对外部表中的数据进行只读访问。外部表定义为不驻留在数据库中的表,通过向数据库提供描述外部表的元数据,数据库能够公开外部表中的数据,就好像它是驻留在常规数据…...
数字图像处理-AWB跳变
1、自动白平衡(AWB)算法是相机中常用的图像处理技术,它能够自动调整图像中的白平衡,使得图像中的颜色更加真实、自然。然而,在实际应用中,AWB算法也存在着一些问题,例如AWB跳变(Whit…...
DNNGP、DeepGS 和 DLGWAS模型构成对比
一、DNNGP DNNGP 是基于深度卷积神经网络,这个结构包括一个输入层,三个卷积层,一个批标准化层,两个dropout层,一个平坦化层,一个 dense层。 dropout层:在神经网络中,dropout层是一个非常有效的正…...
postgresSQL 配置文件设置
postgres.conf 是 PostgreSQL 数据库的主要配置文件,其中包含了许多关于数据库行为的设置。以下是一些常见的配置项: listen_addresses: 这个参数定义了 PostgreSQL 服务监听的网络地址。默认值是 ‘localhost’,这意味着只有本机的客户端才能…...
【bug】Unity无法创建项目
bug UnityHub无法创建项目 UnityHub无法创建项目 出现的问题:在创建新项目时弹出来一个 无法创建项目 尝试的方法: 刷新许可证 ❌没用退出账号重新登陆 ❌没用重启电脑 ❌没用 最后发现是什么问题呢? 2021.3.3这个版本我之前在资源管理器中…...
跨境外贸业务,选择动态IP还是静态IP?
在跨境业务中,代理IP是一个关键工具。它们提供了匿名的盾牌,有助于克服网络服务器针对数据提取设置的限制。无论你是需要经营管理跨境电商店铺、社交平台广告投放,还是独立站SEO优化,代理IP都可以让你的业务程度更加丝滑ÿ…...
Hlang社区-社区导航栏实现
文章目录 前言项目结构导航实现创作中心移动小球消息提示完整代码前言 okey,这里的话是我们社区导航栏的实现: 废话不多说,看看效果: 我甚至为此用New Bing生成了一个Logo。 项目结构 废话不多说,先来看到我们的项目结构: 在这里导航栏是一个组件。 在App.vue里面直…...
Kestrel和ISS服务器下的配置
一、Kestrel服务器 Kestrel是ASP.NET Core框架中的一个跨平台的Web服务器。它是ASP.NET Core应用程序默认的HTTP服务器,并且可作为独立的Web服务器来托管ASP.NET Core应用程序。 Kestrel具有以下特点和功能 1、跨平台 Kestrel是完全跨平台的,可以在Wind…...
uniapp选择只选择月份demo效果(整理)
<template><view style"margin-top: 200rpx;"><!-- mode"multiSelector" 多列选择器 --><view><picker :range"years" :value"echoVal" change"yearChange" mode"multiSelector">{…...
微信ipad协议8.0.40 加好友功能
友情链接 geweapi.com 点击即可访问! 好友请求验证 小提示: v_3 v_4 可以参考 搜索接口 请求URL: http://域名地址/api/contacts/verifyuser 请求方式: POST 请求头: Content-Type:application/js…...
如何通过本地搭建wamp服务器并实现无公网IP远程访问
文章目录 前言1.Wamp服务器搭建1.1 Wamp下载和安装1.2 Wamp网页测试 2. Cpolar内网穿透的安装和注册2.1 本地网页发布2.2 Cpolar云端设置2.3 Cpolar本地设置 3. 公网访问测试4. 结语 前言 软件技术的发展日新月异,各种能方便我们生活、工作和娱乐的新软件层出不穷&…...
matlab使用教程(19)—曲线拟合与一元方程求根
1.多项式曲线拟合 此示例说明如何使用 polyfit 函数将多项式曲线与一组数据点拟合。您可以按照以下语法,使用 polyfit 求出以最小二乘方式与一组数据拟合的多项式的系数 p polyfit(x,y,n), 其中: • x 和 y 是包含数据点的 x 和 y 坐标的向量 …...
【Go 基础篇】Go语言关键字和预定义标识符解析:探索编程的基石与核心要素
介绍 在计算机编程中,关键字(Keywords)和预定义标识符(Predefined Identifiers)是编程语言的核心要素,它们在语法结构和语言功能中起到重要作用。在Go语言(Golang)中,关…...
微服务与Nacos概述-6
RBAC 模型 RBAC 基于角色的访问控制是实施面向企业安全策略的一种有效的访问控制方式。 基本思想是,对系统操作的各种权限不是直接授予具体的用户,而是在用户集合与权限集合之间建立一个角色集合。每一种角色对应一组相应的权限。一旦用户被分配了适当…...
国防科技大学计算机基础课程笔记02信息编码
1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制,因此这个了16进制的数据既可以翻译成为这个机器码,也可以翻译成为这个国标码,所以这个时候很容易会出现这个歧义的情况; 因此,我们的这个国…...
synchronized 学习
学习源: https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖,也要考虑性能问题(场景) 2.常见面试问题: sync出…...
cf2117E
原题链接:https://codeforces.com/contest/2117/problem/E 题目背景: 给定两个数组a,b,可以执行多次以下操作:选择 i (1 < i < n - 1),并设置 或,也可以在执行上述操作前执行一次删除任意 和 。求…...
OkHttp 中实现断点续传 demo
在 OkHttp 中实现断点续传主要通过以下步骤完成,核心是利用 HTTP 协议的 Range 请求头指定下载范围: 实现原理 Range 请求头:向服务器请求文件的特定字节范围(如 Range: bytes1024-) 本地文件记录:保存已…...
React19源码系列之 事件插件系统
事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...
新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案
随着新能源汽车的快速普及,充电桩作为核心配套设施,其安全性与可靠性备受关注。然而,在高温、高负荷运行环境下,充电桩的散热问题与消防安全隐患日益凸显,成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...
uniapp中使用aixos 报错
问题: 在uniapp中使用aixos,运行后报如下错误: AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...
鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南
1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发,使用DevEco Studio作为开发工具,采用Java语言实现,包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...
Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?
Redis 的发布订阅(Pub/Sub)模式与专业的 MQ(Message Queue)如 Kafka、RabbitMQ 进行比较,核心的权衡点在于:简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...
return this;返回的是谁
一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请,不同级别的经理有不同的审批权限: // 抽象处理者:审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...
