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 基于角色的访问控制是实施面向企业安全策略的一种有效的访问控制方式。 基本思想是,对系统操作的各种权限不是直接授予具体的用户,而是在用户集合与权限集合之间建立一个角色集合。每一种角色对应一组相应的权限。一旦用户被分配了适当…...
挑战杯推荐项目
“人工智能”创意赛 - 智能艺术创作助手:借助大模型技术,开发能根据用户输入的主题、风格等要求,生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用,帮助艺术家和创意爱好者激发创意、提高创作效率。 - 个性化梦境…...
【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密
在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...
使用分级同态加密防御梯度泄漏
抽象 联邦学习 (FL) 支持跨分布式客户端进行协作模型训练,而无需共享原始数据,这使其成为在互联和自动驾驶汽车 (CAV) 等领域保护隐私的机器学习的一种很有前途的方法。然而,最近的研究表明&…...
Opencv中的addweighted函数
一.addweighted函数作用 addweighted()是OpenCV库中用于图像处理的函数,主要功能是将两个输入图像(尺寸和类型相同)按照指定的权重进行加权叠加(图像融合),并添加一个标量值&#x…...
【磁盘】每天掌握一个Linux命令 - iostat
目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat(I/O Statistics)是Linux系统下用于监视系统输入输出设备和CPU使…...
【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例
文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...
Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器
第一章 引言:语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域,文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量,支撑着搜索引擎、推荐系统、…...
工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年,作为行业领先的3D工业相机及视觉系统供应商,累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成,通过稳定、易用、高回报的AI3D视觉系统,为汽车、新能源、金属制造等行…...
IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)
文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...
鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南
1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发,使用DevEco Studio作为开发工具,采用Java语言实现,包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...
