el-tree数据量过大,造成浏览器卡死、崩溃

news2024/10/6 12:28:19

el-tree数据量过大,造成浏览器卡死、崩溃

在这里插入图片描述

场景:树形结构展示,数据超级多,超过万条,每次打开都会崩溃

我这里采用的是引入新的插件虚拟树,它是参照element-plus 中TreeV2改造vue2.x版本虚拟化树形控件,不论你的数据量多大,虚拟树都能毫无压力地处理。

虚拟树传送门:https://sangtian152.github.io/virtual-tree/zh/demo/#attributes

前面下载引入这里就不多赘述了,都一样的。

具体代码如下:

<vl-tree
         ref='tree'
         class='filter-tree'
         :props='defaultProps'
         :data='dataList'
         :height='430'
         show-checkbox
         :expand-on-click-node='false'
         :default-checked-keys='defaultChecked'
         :default-expanded-keys='defalutExpanded'
         :filter-methods='filterMethod'
         ></vl-tree>

别的都和el-tree差不多,不会用的可以点传送门去看看,里面属性方法都有的。

但是用这个还有一个问题就是,当数据量过大且都选中的时候,回显的时候会超级超级慢,而且还会崩溃,但是这个时候是由于回显的数据过多引起的。尝试了好多方法都不行,分时函数都用上了,虽然不崩溃了,但是超级慢。

后来的解决办法是:

回显的时候,调用后端接口,让后端只返回选中的父节点,让它自动关联选中子节点,暂时解决了这个问题。

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

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

相关文章

基于微服务架构的外卖系统源码开发

在当前互联网时代&#xff0c;外卖行业蓬勃发展&#xff0c;用户对于高效、智能的外卖服务需求不断增加。为了满足这一需求&#xff0c;采用微服务架构的外卖系统成为了开发的主流方向。本文将探讨基于微服务的外卖系统源码开发&#xff0c;涉及到关键技术和示例代码。 1. 微…

远程控制如何赋能智能制造?贝锐向日葵制造业场景案例解析

随着数字化转型在制造业的不断深入&#xff0c;企业在产线端也逐渐投入更多智能化设备&#xff0c;数字化、智能化设备其中一个比较显著的优势就是可以依托互联网实现远程运维和调试&#xff0c;大大提升产线设备的稳定性和工作效率&#xff1b;而远程调试运维一个重要的实现方…

ALTERNET STUDIO 9.1 Crack

ALTERNET STUDIO 9.1 发布 宣布 AlterNET Studio 9.1 版本今天上线。AlterNET Studio 9.0 是一个中期更新&#xff0c;重点是改进我们所有的组件库。 以下是 AlterNET Studio 9.1 的发布亮点&#xff1a; Roslyn C# 和 Visual Basic 解析器现在支持代码修复/代码重构。 代码修复…

el-date-picker时间控制范围为过去时间不可选

<el-date-picker :picker-options"startPickerOptions()" value-format"yyyy-MM-dd HH:mm:ss" v-model"form.applyFixPlan" type"datetime" placeholder"选择日期时间"> </el-date-picker> 在method中定义star…

【ESP32 IDF】ESP32移植u8g2库,实现oled界面显示

ESP32移植u8g2库&#xff0c;实现oled界面显示 1. 简单描述2. 环境准备1. 硬件准备2. 软件准备 3. IIC屏幕 【基于 ssd1362 256*64 】4. SPI屏幕 【基于 ssd1306 128*32】 1. 简单描述 开发方式为 IDF5.0参考连接为 iic基于esp-idf移植使用u8g2 spi基于esp-idf移植使用u8g2 …

插入排序——直接插入排序和希尔排序(C语言实现)

文章目录 前言直接插入排序基本思想特性总结代码实现 希尔排序算法思想特性总结代码实现 前言 本博客插入排序动图和希尔排序视频参考大佬java技术爱好者&#xff0c;如有侵权&#xff0c;请联系删除。 直接插入排序 基本思想 直接插入排序是一种简单的插入排序法&#xff…

广播和组播

1. 广播 1.1 知识点 INADDR_ANY代表本机所有地址 常用方法当你将套接字绑定到INADDR_ANY&#xff0c;它会监听所有可用的网络接口&#xff0c;这意味着它将接受来自所有本地IP地址的传入连接或数据包 1.1.1 广播的流程 广播发送端&#xff1a; ----> 添加广播属性 1、建立套…

JAVA后端自学技能实操合集

JAVA后端自学技能实操 内容将会持续更新中,有需要添加什么内容可以再评论区留言,大家一起学习FastDFS使用docker安装FastDFS(linux)集成到springboot项目中 内容将会持续更新中,有需要添加什么内容可以再评论区留言,大家一起学习 FastDFS 组名&#xff1a;文件上传后所在的 st…

MySQL中是如何insert数据的

正常insert数据&#xff0c;MySQL并不会显式加锁&#xff0c;而是通过聚簇索引的trx_id索引作为隐式锁来保护记录的。比如两个事务对一个非唯一的索引情况添加&#xff0c;会造成幻读 但在某些特殊情况下&#xff0c;隐式锁会转变为显式锁&#xff1a; 记录之间有间隙锁inser…

Qt使用Cryptopp生成HMAC-MD5

近期项目中HTTPS通讯中&#xff0c;token需要使用HMAC-MD5算法生成&#xff0c;往上找了一些资料后&#xff0c;仍不能满足自身需求&#xff0c;故次一记。 前期准备&#xff1a; ①下载Cryptopp库&#xff08;我下载的是8.8.0 Release版本&#xff09;&#xff1a;Crypto Li…

基础课19——知识图谱问答引擎

1.概念 知识图谱是一种结构化的知识表示方式&#xff0c;将实体、属性和关系以图形的形式进行表达和组织。它通过对知识进行结构化建模&#xff0c;将不同实体之间的关系进行编码&#xff0c;形成一个图结构的知识网络。知识图谱的目标是将人类的知识整合到一个统一的框架中&a…

Segment Anything--SAM框架(二)

文章目录 prologuepaper && codeImage encoderPrompt encoderLightweight mask decoderMaking the model ambiguity-aware prologue 没什么事&#xff0c;写一写SAM的paper中关于模型框架的部分和实际代码部分。 paper && code SAM有三个组件&#xff0c;如图…

图数据库知识点9 | 大数据框架与图数据架构异同

开门见山&#xff0c;直奔主题&#xff0c;接续前面的知识点&#xff1a; 【图数据库知识点1|图数据库与关系型数据库的区别&#xff1f;】 【图数据库知识点2 | 图思维方式】 【图数据库知识点3 | 图数据库解决了什么问题&#xff1f;】 【图数据库知识点4 | 图计算与图数…

TypeScript枚举类型、类型断言

一. 概念 TypeScript中的枚举是一种数据类型&#xff0c;它是一组具有预定义名称的有限值的集合。枚举类型可以使代码更加可读、可维护和易于理解。 类似对象&#xff0c;枚举是将一组无序但极度相关数组集合在一起声明存储。 二. 枚举特性 1. 内部进行了双向赋值 enum Numb…

奕碳科技亮相COP28:展现中国智慧,引领全球碳减排新篇章

11月30日,联合国气候变化框架公约第28次缔约方大会 (COP28) 在阿联酋迪拜开幕。COP28是全球气候治理的重要盛会&#xff0c;汇聚了世界各国领导人、企业界和科学界代表&#xff0c;共同探讨和制定应对全球气候变化的策略与行动计划。在这样的背景下&#xff0c;企业群体的积极参…

力扣题:字符的统计-12.7

力扣题-12.7 [力扣刷题攻略] Re&#xff1a;从零开始的力扣刷题生活 力扣题1&#xff1a;467. 环绕字符串中唯一的子字符串 解题思想&#xff1a;记录下以字母s[i]结尾的最大的字串个数&#xff0c;然后统计a-z每个字母结尾的最大字串的个数进行i相加 class Solution(object…

「Verilog学习笔记」同步FIFO

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 timescale 1ns/1ns /**********************************RAM************************************/ module dual_port_RAM #(parameter DEPTH 16,parameter WIDTH 8)(in…

Anaconda建虚拟环境并在jupyter中打开

1.假设要用yaml格式创建虚拟环境 从开始里打开anaconda powersheel 输入以下 conda env create -f environment.yaml conda activate env_name activate以下虚拟环境 修改名称 如果不用yaml也可以用 conda create --name my_first_env python3.6 这个来指定 2.(base)变(…

海思3516DV500下的目标识别算法运行评估,包含yolov7,yolov8

目前在3516DV500下&#xff0c;自己训练的模型的评估实测结果。根据实际模型会有些许差异。 涉及到技术细节的部分因为商业用途&#xff0c;有部分省略。如需相关技术服务项目合作可私信联系。 我司推出的目标识别跟踪模块&#xff0c;支持热红外、可见光主流多光谱视频输入与目…

LCR 090. 打家劫舍 II(leetcode)动态规划

文章目录 前言一、题目分析二、算法原理1.状态表示2.状态转移方程3.初始化4.填表顺序5.返回值是什么 三、代码实现总结 前言 在本文章中&#xff0c;我们将要详细介绍一下LeetcodeLCR 090. 打家劫舍 II。采用动态规划解决&#xff0c;这是一道经典的多状态dp问题 一、题目分析…