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

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

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

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

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

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

具体代码如下:

html 复制代码
<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差不多,不会用的可以点传送门去看看,里面属性方法都有的。

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

后来的解决办法是:

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

相关推荐
kyriewen3 小时前
微软用Go重写TypeScript编译器,速度提升10倍,网友:这是“背叛”还是“救赎”?
前端·typescript·ecmascript 6
Ceelog3 小时前
久坐党自救指南:屏幕前 8 小时,身体到底在经历什么
前端·后端
西陵3 小时前
Agent 为什么会陷入 Doom Loop?OpenClaw 的破解之道
前端·人工智能·ai编程
Hyyy4 小时前
普通前端续命周报——第2周
前端
swipe4 小时前
DeepAgents 实战:用多 Agent 架构搭一个深度调研助手
javascript·面试·llm
wuxinyan1234 小时前
工业级大模型学习之路030:Streamlit 企业级智能体前端工作台
前端·学习·streamlit·智能体
修己xj4 小时前
告别无效刷屏!TrendRadar:最快30秒部署的开源热点助手,让你只看真正关心的新闻
前端
anOnion5 小时前
构建无障碍组件之Slider Pattern
前端·html·交互设计
云水一下5 小时前
JavaScript 从零基础到精通系列:前世今生与编程启蒙
前端·javascript
月亮邮递员6165 小时前
Markdown语法总结
开发语言·前端·javascript