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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/45716.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

02-MyBatis

1、MyBatis中的工作原理 1、MyBatis框架的初始化操作。 系统启动的时候会加载解析全局配置文件和对应映射文件。加载解析的相关信息存储在 Configuration 对象,Configuration是SqlSessionFactory类中的一个属性。 2、处理SQL请求的流程。 public void test1() throws Excep…

免费开源服务器资源监控系统grafana+prometheus+node_exporter

有项目做测试的时候需要查询服务器资源利用情况&#xff0c;自己又没写相应的模块&#xff0c;此时就需要一套好用的资源监控系统&#xff0c;&#xff0c;咨询了运维人员给推荐了一套&#xff0c;装完后真的很好用。 就是grafanaprometheusnode_exporter&#xff08;linux&am…

三、Kafka生产者

目录 3.1 生产者消息发送流程3.1.1 发送原理 3.2 异步发送 API3.3 同步发送数据3.4 生产者分区3.4.1 kafka分区的好处3.4.2 生产者发送消息的分区策略3.4.3 自定义分区器 3.5 生产者如何提高吞吐量3.6 数据可靠性 3.1 生产者消息发送流程 3.1.1 发送原理 3.2 异步发送 API 3…

30.Netty源码服务端启动主要流程

highlight: arduino-light 服务端启动主要流程 •创建 selector •创建 server socket channel •初始化 server socket channel •给 server socket channel 从 boss group 中选择一个 NioEventLoop •将 server socket channel 注册到选择的 NioEventLoop 的 selector •…

Ubuntu20.04安装Nvidia显卡驱动教程

1、禁用nouveau 1、创建文件&#xff0c;如果没有下载vim编辑器&#xff0c;将vim换成gedit即可 $ sudo vim /etc/modprobe.d/blacklist-nouveau.conf 2、在文件中插入以下内容&#xff0c;将nouveau加入黑名单&#xff0c;默认不开启 blacklist nouveau options nouveau m…

DSO 系列文章

本文是 DSO 系列文章&#xff0c;主要是分析了 DSO 后端优化的代码和原理。 DSO 系列文章(1)——DSO系统预处理DSO 系列文章(2)——DSO点帧管理策略DSO 系列文章(3)——DSO后端正规方程构造与Schur消元 DSO代码注释&#xff1a;https://github.com/Cc19245/DSO-CC_Comments

计算机技术与软件专业技术资格(水平)考试----系统架构设计师

【原文链接】计算机技术与软件专业技术资格&#xff08;水平&#xff09;考试----系统架构设计师 考试简介 计算机软件资格考试是由国家人力资源和社会保障部、工业和信息化部领导下的国家级考试。计算机软件资格考试既是职业资格考试&#xff0c;又是职称资格考试。考试合格…

git clone -b与git pull origin <branch_name>的区别

git clone -b 和 git pull origin <branch_name> 都是用于在 Git 中操作分支的命令&#xff0c;但它们有不同的用途和行为。 git clone -b 这是在克隆仓库时指定要克隆的特定分支的命令。它用于在克隆一个仓库的同时指定要克隆的分支。例如&#xff0c;如果你只想克隆一…

在线HmacSHA256加密工具--在线获取哈希值又称摘要

具体请前往&#xff1a; 在线计算HmacSha256工具

【公告】停止更新

CSDN 博客的限制太多了。阅读体验也非常差。后续将不再 CSDN 上更新。 逐步迁移到掘金和个人博客。 欢迎关注 掘金&#xff1a;0xforee 个人博客&#xff1a;0xforee’s blog

centos7 jupyter notebook 安装自动补全插件

激活juoyter notebook的安装环境 conda activate prod执行以下命令安装 pip install jupyter_contrib_nbextensions -i https://pypi.tuna.tsinghua.edu.cn/simple jupyter contrib nbextension install --userpip install jupyter_nbextensions_configurator -i https://py…

unity 之 Input.GetMouseButtonDown 的使用

文章目录 Input.GetMouseButtonDown Input.GetMouseButtonDown 当涉及到处理鼠标输入的时候&#xff0c;Input.GetMouseButtonDown 是一个常用的函数。它可以用来检测鼠标按键是否在特定帧被按下。下面我会详细介绍这个函数&#xff0c;并举两个例子说明如何使用它。 函数签名…

C语言——通讯录详解(文件版)

文件版通讯录 前言&#xff1a;一、保存通讯录二、读取通讯录2.1 通讯录初始化2.2 将文件的信息加载到通讯录 三、代码展示3.1通讯录的声明和定义(contct.h)3.2通讯录函数的实现&#xff08;contact.c&#xff09;3.2 通讯录的测试(test.c) 前言&#xff1a; 我们已经掌握了通…

Oracle19c-补丁升级报错合集(一)

前言: 本文主要介绍Oracle19c补丁升级遇到的问题&#xff0c;涉及安装补丁prepatch步骤&#xff0c;apply应用报错以及datapatch -verbose数据字典更新报错 问题一: 在执行补丁rootcrs.sh -prepatch操作时&#xff0c;发生执行检查命令cluutil -chkshare报错 CLSRSC-180: An …

记录首次面试2023-08-18

人生第一次面试&#xff0c;大概一个小时左右。没有问我C的&#xff0c;上来一个数据库事务&#xff0c;虽然没有复习&#xff0c;但是还是能够记住一些&#xff0c;主要问的一些事务的隔离级别&#xff0c;以及都有什么作用&#xff0c;我是举例回答的&#xff0c;客户端A和客…

14.pod控制器

文章目录 pod控制器概述有状态和无状态DeploymentDaemonSetSatefulSet配置 JobCronJob总结 pod控制器 概述 Pod控制器及其功用 Pod控制器&#xff0c;又称之为工作负载&#xff08;workload&#xff09;&#xff0c;是用于实现管理pod的中间层&#xff0c;确保pod资源符合预期…

设计模式——迪米特法则

文章目录 基本介绍应用实例应用实例改进迪米特法则注意事项和细节 基本介绍 一个对象应该对其他对象保持最少的了解类与类关系越密切&#xff0c;耦合度越大迪米特法则(Demeter Principle)又叫最少知道原则&#xff0c;即一个类对自己依赖的类知道的越少越好。也就是说&#x…

设计模式笔记

工厂模式&#xff1a; 1.Simple Factory Pattern : 是指由一个工厂对象决定创建出哪一种产品类的实例&#xff0c;简单工厂是产品的工厂&#xff0c;工厂类负责创建的对象较少&#xff0c;客户端需要传入工厂类的参数&#xff0c;对于如何创建对象的逻辑不关心。 缺点&#xf…

使用 Node.js 生成优化的图像格式

使用 Node.js 生成优化的图像格式 图像是任何 Web 应用程序的重要组成部分&#xff0c;但如果优化不当&#xff0c;它们也可能成为性能问题的主要根源。在本文中&#xff0c;我们将介绍如何使用 Node.js 自动生成优化的图像格式&#xff0c;并以最适合用户浏览器的格式显示它们…

Visual Studio Code前端开发插件推荐

引言 Visual Studio Code&#xff08;简称VS Code&#xff09;是一款轻量级且强大的开源代码编辑器&#xff0c;广受前端开发者的喜爱。其丰富的插件生态系统为前端开发提供了许多便利和增强功能的插件。本篇博客将向大家推荐一些在前端开发中常用且优秀的插件&#xff0c;并提…