当前位置: 首页 > news >正文

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.lryc.cn/news/257098.html

相关文章:

  • 2024 年甘肃省职业院校技能大赛中职组 电子与信息类“网络安全”赛项竞赛样题-A
  • 面向LLM的App架构——业务维度
  • ElasticSearch之cat plugins API
  • 【小米电脑管家】安装使用教程--非小米电脑
  • 视频讲解|基于多目标粒子群算法的配电网储能选址定容
  • Android 13 - Media框架(22)- MediaCodec(三)
  • git提交报错 fatal: LF would be replaced by CRLF in package-lock.json
  • 卷积详解和并行卷积
  • c#生成二维码二维码中间添加定制LoGo
  • 设计CPU功能的数字电路
  • 在windows下编译libiconv库
  • html,css,开发知识,调试知识
  • Vulnerability: File Upload(Medium)--MYSQL注入
  • 短视频账号剪辑矩阵+无人直播系统源头开发
  • Python traceback模块:获取异常信息
  • 单点登录方案调研与实现
  • HarmonyOS应用开发者基础认证考试(稳过)
  • 日常开发日志
  • 【FMCW毫米波雷达设计 】 — FMCW波形
  • 力扣labuladong一刷day35天
  • Matlab 曲线动态绘制
  • Spark DataFrame和Dataset使用例子
  • CSS彩色发光液体玻璃
  • OpenGLES:glReadPixels()获取相机GLSurfaceView预览数据并保存
  • 小红书蒲公英平台开通后,有哪些注意的地方,以及如何进行报价?
  • 持续集成交付CICD:Jenkins配置Nexus制品上传流水线
  • C语言笔试例题_指针专练30题(附答案解析)
  • 【Vue+Python】—— 基于Vue与Python的图书管理系统
  • 智能成绩表 - 华为OD统一考试(C卷)
  • 【基于ESP32无线蓝牙上传电脑Excel透传数据】