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

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

在这里插入图片描述

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

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

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

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

具体代码如下:

<vl-treeref='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.hqwc.cn/news/258672.html

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

相关文章

【Linux】浅谈信号量

文章目录 一、共享内存的弊端新概念引入 二、理解信号量原子性 tips&#xff1a;system V 是一套标准&#xff0c;共享内存&#xff0c;信号量&#xff0c;消息队列属于system V。 一、共享内存的弊端 进程A和进程B进行通信时&#xff0c;假如进程A向物理内存的共享区写入&quo…

用AI来纠正错别字和修饰文字

▲ 搜索“大龙谈智能内容”关注GongZongHao▲ 在使用谷歌翻译或百度翻译将英语翻译成中文时&#xff0c;有些句子读起来不太流畅。我尝试使用AI来帮助我修改翻译后的中文&#xff0c;希望能让句子更符合中文习惯。 使用百度文心一言尝试一下。 文心一言的链接是这个&#x…

Axure官方软件安装、汉化保姆级教程(带官方资源下载)

1.下载汉化包 百度云链接&#xff1a;https://pan.baidu.com/s/1lluobjjBZvitASMt8e0A_w?pwdjqxn 提取码&#xff1a; jqxn 2.解压压缩包 3.安装Axure 进行安装 点击next 打勾&#xff0c;然后next, 默认是c盘&#xff0c;修改成自己的文件夹&#xff08;不要什么都放c盘里…

【vSphere | VM】虚拟机自定义规范Ⅱ——创建 Windows 虚拟机自定义规范

目录 3. 创建关于Windows系统的虚拟机自定义规范3.1 新建 Windows 虚拟机自定义规范&#xff08;1&#xff09;名称和目标操作系统(2) 注册信息&#xff08;3&#xff09;计算机名称使用虚拟机名称输入名称 &#xff08;4&#xff09;Windows 许可证&#xff08;5&#xff09;管…

C++-类和对象

目录 一.C语言和C的区别 二.类的引入 三.类的定义 1.类的定义 2.类的成员方法的两种定义方式&#xff1a; 3.类的成员变量的定义 四.类的访问限定符及封装 1.访问限定符 五.面向对象的三大特征 1.面向对象的三大特征分别是什么 2.封装 六.类的作用域 七.创建类对象 1.类…

PyQt6 QTimeEdit时间控件

​锋哥原创的PyQt6视频教程&#xff1a; 2024版 PyQt6 Python桌面开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili2024版 PyQt6 Python桌面开发 视频教程(无废话版) 玩命更新中~共计39条视频&#xff0c;包括&#xff1a;2024版 PyQt6 Python桌面开发 视频教程(无废话…

Grad-CAM原理

这篇是我对哔哩哔哩up主 霹雳吧啦Wz 的视频的文字版学习笔记 感谢他对知识的分享 只要大家一提到深度学习 缺乏一定的解释性 比如说在我们之前讲的分类网络当中 网络它为什么要这么预测 它针对每个类别所关注的点在哪里呢 在great cam这篇论文当中呢 就完美的解决了在cam这篇论…

初识Linux:权限(2)

目录 权限 用户&#xff08;角色&#xff09; 文件权限属性 文件的权限属性&#xff1a; 有无权限的区别&#xff1a; 身份匹配&#xff1a; 拥有者、所属组的修改&#xff1a; 八进制的转化&#xff1a; 文件的类型&#xff1a; x可执行权限为什么不能执行&#xf…

MySQL 教程 2.1

MySQL 插入数据 MySQL 表中使用 INSERT INTO 语句来插入数据。 你可以通过 mysql> 命令提示窗口中向数据表中插入数据&#xff0c;或者通过PHP脚本来插入数据。 语法 以下为向MySQL数据表插入数据通用的 INSERT INTO SQL语法&#xff1a; INSERT INTO table_name (colu…

Mysql 日期函数大全

一、时间函数 &#xff08;一&#xff09;、获取当前时间 1、NOW() 获取当前日期和时间&#xff0c;在程序一开始执行便拿到时间 返回格式 YYYY-MM-DD hh:mm:ss eg&#xff1a; NOW() 得到 2023-12-03 12:20:02 NOW(),SLEEP(2),NOW() 得到 2023-12-03 12:20:02 | 0 | 2023-…

基于YOLOv7算法和Caltech数据集的高精度行人目标检测识别系统(PyTorch+Pyside6+YOLOv7)

摘要&#xff1a;基于YOLOv7算法和Caltech数据集的高精度行人目标检测系统可用于日常生活中检测与定位行人目标&#xff0c;此系统可完成对输入图片、视频、文件夹以及摄像头方式的目标检测与识别&#xff0c;同时本系统还支持检测结果可视化与导出。本系统采用YOLOv7目标检测算…

LLM时代,数据为王,19个开源数据集下载网站汇总

大模型时代&#xff0c;数据为王&#xff0c;在哪里寻找开源数据集&#xff0c;是一个比较头疼的问题。经过调研整理&#xff0c;下面列出了目前可以寻找开源大模型数据集的网站清单。 1、HuggingFace开源数据集 链接&#xff1a;https://huggingface.co/datasets 镜像&#…