element-ui的el-tree节点含有图片,收起展开图片会卡顿

embedded/2024/10/19 5:27:53/

问题:element-ui的树结构如果节点中有图片,收起或展开时,内容收起了,图片会卡顿一下晚一点收起。
导致的原因有可能是以下几种情况

图片加载:如果树形结构中的每个节点都包含图片,并且这些图片是动态加载的(例如,从远程服>务器加载),那么在折叠或展开节点时,浏览器可能需要花费额外的时间来加载和渲染这些图片。这可能导致视觉上的卡顿或延迟。
DOM 操作:折叠或展开树形结构的节点时,element-ui 会对 DOM 进行相应的操作。如果树形结构很大,包含很多节点和图片,这些 DOM 操作可能会变得复杂且耗时,从而导致卡顿。
JavaScript 执行:折叠或展开操作可能涉及到复杂的 JavaScript 逻辑,特别是当树形结构是动态生成或包含复杂数据时。大量的 JavaScript 计算或数据处理可能会阻塞主线程,导致界面卡顿。
浏览器渲染:当树形结构中的节点被折叠或展开时,浏览器需要重新计算布局并渲染新的 DOM 结构。如果这个过程涉及到大量的图片或复杂的样式,渲染可能会变得缓慢,导致卡顿。
资源限制:如果设备的 CPU、内存或网络带宽等资源有限,那么在处理大量的图片和 DOM 操作时,可能会更容易出现卡顿现象。

优化:
建议使用字体图标库
但是我们ui设计师不提供字体图片,直接甩张图片,(╯▔皿▔)╯气的想刀人!!!!!!!!!!!!
继续找原因解决:
只能展开的时候手动让图标展示,收起时,在手动隐藏,代码如下

<el-treeref="tree":data="tree_data"accordionnode-key="id"	@node-collapse="handleNodeCollapse"@node-expand="handleNodeExpand"><span class="custom-tree-node" slot-scope="{ node, data }"><i style="display:none" class="icon"></i><span>{{node.label}}</span></span>
</el-tree>
//收起时
handleNodeCollapse(data, node, instance){document.querySelectorAll('.el-tree-node__children .el-tree-node__content .icon').forEach(node => {node.style.display = 'none';});
},
//展开
handleNodeExpand(data, node, instance){//展开先把所有有图标的隐藏(如果用了accordion是否每次只打开一个同级树节点展开就要考虑,不然也会卡)this.$nextTick(()=>{let children = instance.$parent.$childrenchildren.forEach(item=>{item.$children.forEach(el=>{						if(el.$el.className.indexOf('el-tree-node')!==-1){							el.$el.querySelectorAll('.el-tree-node__content .icon').forEach(val => {val.style.display = 'none';})}})					})//再把当前节点的显示,因为展开的时候有动画时间,我们也加个定时器setTimeout(()=>{if(instance.$el.className.indexOf('el-tree-node')!==-1){instance.$el.querySelectorAll('.el-tree-node__children .el-tree-node__content .icon').forEach(val => {val.style.display = 'block';})}},200)})
}

用图片真的很不方便,需要写很多代码,真心建议设计师们,不要直接甩图片啊啊啊啊啊,
这是我想的解决方案,有没有其他更优化一点的啊~求评论


http://www.ppmy.cn/embedded/19994.html

相关文章

机器人模型匹配控制(MPC)MATLAB实现

模型匹配控制&#xff08;Model matching control&#xff09;是指设计一个控制器使闭环系统的传递函数tf(s)与td(s)相一致&#xff01; mpcDesigner 可以分为&#xff1a; 2时域精确模型匹配控制3频域精确模型匹配控制 机械臂控制中应用模型匹配控制&#xff08;Model Matc…

HTTP与SOCKS-哪种协议更适合您的代理需求?

网络代理技术是我们日常使用网络时必不可少的一项技术&#xff0c;它可以为我们提供隐私保护和负载均衡的能力&#xff0c;从而保证我们的网络通信更加安全和顺畅。而其中最主流的两种协议就是HTTP和SOCKS。虽然它们都是用于网络代理的协议&#xff0c;但在实际应用中却存在着一…

深度学习基础——卷积神经网络的基础模块

深度学习基础——卷积神经网络的基础模块 卷积神经网络&#xff08;Convolutional Neural Networks&#xff0c;CNN&#xff09;是深度学习中一种非常重要的神经网络结构&#xff0c;它在图像识别、图像分类、目标检测等领域取得了巨大成功。本文将介绍卷积神经网络的几个基础…

分类预测 | Matlab实现SCSO-SVM沙猫群优化算法优化支持向量机多特征分类预测

分类预测 | Matlab实现SCSO-SVM沙猫群优化算法优化支持向量机多特征分类预测 目录 分类预测 | Matlab实现SCSO-SVM沙猫群优化算法优化支持向量机多特征分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 1.Matlab实现SCSO-SVM沙猫群优化算法优化支持向量机多特征分类…

从 Apache Doris 到 SelectDB Cloud:云原生架构下的弹性能力揭秘

随着云时代的到来&#xff0c;越来越多企业开始在公有云、私有云乃至 K8s 容器平台构建实时数据平台。云计算基础设施的革新&#xff0c;促使着数据仓库朝着云原生的方向发展。而用户日益复杂的业务负载和降本增效的需求&#xff0c;对于系统资源的精细化管理和成本效益等方面提…

related_name和related_query_name属性

在Django模型继承中&#xff0c;假如在外键或多对多字段中使用了related_name属性或related_query_name属性&#xff0c;则必须为该字段提供一个独一无二的反向名字和查询名字。但是&#xff0c;这样在抽象基类中一般会引发问题&#xff0c;因为基类中的字段都被子类继承并且保…

安卓手机APP开发__媒体开发部分__使用媒体会话对播放进行控制和加广告

安卓手机APP开发__媒体开发部分__使用媒体会话对播放进行控制和加广告 目录 概述 当选择一个媒体会话时 创建一个媒体会话 自动化地处理状态 唯一的媒体编号 对其它的客户端的控制的授权 修改播放列表 管理定制化的布局和定制化的指令 定义会话的定制化布局

Spring Bean依赖注入-Spring入门(二)

1、SpringBean概述 在Spring中&#xff0c;一切Java对象都被视为Bean&#xff0c;用于实现某个具体功能。 Bean的依赖关系注入的过程&#xff0c;也称为Bean的装配过程。 Bean的装配方式有3种&#xff1a; XML配置文件注解Java类 Spring中常用的两种装配方式分别是基于XML的…