vue+elementui1.x tree组件数据太多时加载过慢的解决方案

最新推荐文章于 2025-06-09 12:00:40 发布
最新推荐文章于 2025-06-09 12:00:40 发布
阅读量1.3w 收藏 2
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ui 大数据 ViewUI
原文链接：https://my.oschina.net/yxmBetter/blog/1588250
针对ElementUI 1.x中Tree组件在大量数据时加载缓慢的问题，本文介绍了一种通过增加查询开关变量并采用分层加载的方式进行优化的方法，并讨论了懒加载在不同场景下的适用性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

在使用elementui1.x的tree组件时，如果数据量多大，那么在加载dom树，尤其是搜索的时候，数据非常缓慢

解决

  • 添加是否查询的变量开关：ifquery +默认 ifquery设置为false
  • 在加载的时候，先加载数据的一层和二层，将二层以下的数据删除
  • 在点击二层的时候，如果ifquery为false，使用node-expand的方法加载余下的节点内容
  • 在查询的时候，ifquery设置为true，此时数据为未删除的完整数据。

其他

  • 有懒加载方式的：elementui1.x tree
  • 在层级比较深的情况下，懒加载方式加载很慢。一般如果没有搜索的话可以使用懒加载。

转载于:https://my.oschina.net/yxmBetter/blog/1588250

Vue项目优化方案
m0_51431448的博客
08-14 5182
当我们项目开发到后期的时候，可能就要谈及到去优化下项目了，比如经常碰见的：打包体积过大，首屏加载太慢，还有性能的问题，这其实跟我们平时开发的时候息息相关，代码写的怎么样还得是看个人了...
element-ui的el-tree节点含有图片，收起展开图片会卡顿
qq_43151592的博客
04-24 767
解决element-ui的el-tree节点含有图片，收起展开图片会卡顿
解决el-table树形数据量过大，导致卡顿问题
IT_dabai的博客
06-30 7110
element-ui里面的树状表格，当层级和数据过多的时候会出现点击展开和折叠的时候卡顿。这种处理方式会在展开过多时慢慢变得卡顿，所以需要提供一个逻辑，使得用户可以一键回到第一层，且卸载所有子节点。我以为是源码里的逻辑不好，debug源码，但是没有发现原因，后求助同事，得出是dom元素过多导致的。在点击展开的时候，改变display样式，因为元素位置变化，页面发生回流，且元素多，所以开销大。一次性加载所有数据的时候，折叠的元素都已经加载了，只是样式为dispaly：none；
优化elemen-ui的el-table的tree树结构因数据过多卡顿问题
兔子的博客
02-06 5577
最近遇到一个要在elemen-ui的el-table放一个树结构的表数据但是因为数据实在过多，而且列也有四五列，还有操作列dom操作频繁导致页面非常的卡顿网上看了很多种方法以及elementui的官方方法使用lazy和load方法终于解决。
tree 树组件大数据卡顿问题优化
最新发布
weixin_43239880的博客
06-09 765
很多项目由于前期数据量不大，所以组件可以正常使用，但是当用户量或者数据量大了之后，浏览器就会变得卡顿，这种优化就是必须的。大家可以把代码拉下来运行对比下，没有使用虚拟列表技术的树真的很卡。
当element中的tree组件数据量超过万条处理方式
fangyes888的博客
09-14 1万+
就是很普通的树形结构，所存在的问题就是，返回的数据中，子集可能有几条几万条不等，存在的问题也显而易见了 数据量过大，样式越复杂，浏览器舒渲染的过程就会越慢。 经过再三思考，应该有三种方式可以处理（方法肯定不止三种） html // 这里我使用的是render-content方式生成tree组件样式 <div class="cont" ref="list" @scroll="handleScroll($event)"> <el-tree
el-tree大量数据会导致dom渲染缓慢问题
qq_41920758的博客
06-13 2012
但如果在节点数量在万级以上会有明显的卡顿，若数据量在五万以上可能会导致el-tree假死的情况。注意此方法查询会导致dom渲染卡顿问题，也可以做成你可以做成懒加载的树，搜索查询某个节点时调用接口，让后端返回对应的路径。看看vue-easy-tree的效果。无卡顿，我们通过控制台可以看出，el-tree渲染了所有节点，而虚拟滚动只渲染了可视区域的节点。vue 实现 tree 树形大量数据的多功能虚拟滚动-Virtual Tree_Brad_chao的博客-CSDN博客_vue树形数据展示。
el-tree数据量过大，造成浏览器卡死、崩溃
qq_41838435的博客
12-05 4000
树形结构展示，数据超级多，超过万条，每次打开都会崩溃
前端面试题知识点总结（仅供参考）
jiang16608544720的博客
03-14 2137
以下是本人面试后总结出来的面试知识点： 1.1. 模块化 \1. ES6 \2. Commonjs 1.2. 构建工具 \1. Webpack核心思想：模块化打包 \2. Webpack基本配置: entry, output, module&rules, plugins, devServer, devtool, resolve \3. 打包各种资源: JS / CSS/img/html/… \4. 加分项: 自定义webpack打包环境, Webpa
Element UI样式应用正确与误区：Vue开发者指南
Vue开发者指南](https://img-blog.csdnimg.cn/20201213112829621.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM1MTc3OTc=,size_16,color_FFFFFF...
前端开发框架搭建步骤
weixin_44596285的博客
03-04 3424
1.安装node.js https://nodejs.org/en/ node.js自带npm工具，如果觉得npm下载资源太慢，可继续安装cnpm npm install -g cnpm 2.安装vue-cli脚手架 npm install --global vue-cli 验证是否安装成功 vue -V//命名可以得到vue的版本号信息 3.初始化一个vue项目 使用cd命令找到项目需要放...
vue 使用 element-plus 中的el-tree 卡顿问题
weixin_43891869的博客
08-06 1658
loadNode(node, resolve)：这是懒加载函数的标准形式，接收两个参数，node 是当前需要加载子节点的树节点，resolve 是一个回调函数，用于将加载的子节点数据“解决”并填充到树节点中。await 会在等待 Promise 解决时暂停函数的执行，这在某些情况下可能会导致不必要的等待，尤其是在主线程上，这可能会影响 UI 的响应性。在某些情况下，如果 loadNode() 方法中包含多个 await 调用，它们会按顺序执行，这可能会阻塞异步执行队列，延迟其他异步操作的执行。
第三十五篇：element UI tree 树图文字过多超出隐藏带...鼠标经过显示超出的文字
maliyao4233的博客
10-20 1531
问题说明：tree树状图展开的时候问题太长被覆盖。methods:鼠标经过事件。
element-plus使用弹窗里面有个el-tree大量数据会导致dom渲染缓慢问题。第一次打开弹窗很慢半天才打开
肖肖肖丽珠的博客
08-06 886
开始想到要用懒加载，点击一个层级展开一个。但是这样效果不太好。我使用这个主要是希望每个层级都可以选择，而不是只能选子节点。这个是我本地的一个josn文件也不是很大131k。但是打开这个弹窗的时候，第一次打开会超级的慢。感觉是弹窗里面的内容加载，在加载完之后才会显示弹窗，所以弹窗第一次打开的时候就非常的慢。最后就改了:render-after-expand="花了好久最后才发现原来改一个参数就可以了。"这个false改成true就好了。
elementui树形表格数据量大时，会造成严重卡顿问题的解决方案
热门推荐
qq_40639028的博客
03-17 1万+
之所以会造成卡顿，是因为该组件是一次性将所有数据全部渲染，dom数量过于庞大，并且在展开树操作的时候，用了大量递归循环语句，性能受到严重影响，造成卡顿。 我想到的解决方式有两种： 一：分页，让后端添加分页查询，以节点数统计数据条数进行展示。（但实际需求中较少，一般树形表格都是不分页）。 二：将请求到的树形数组数据备份（tableDataCopy），初始化仅仅展示指定层级（如第一层树）的数据，将第一层下面的所有的children全部置为null，并记录存在children的节点，设置hasChild..
el-tree加载数据量大（1万+数据）页面渲染慢优化
qq_44716001的博客
12-26 1534
【代码】el-tree加载数据量大（1万+数据）页面渲染慢优化。
el-tree组件中数量大出现卡顿问题
miracle22222的博客
03-02 8396
在对话框中嵌入了一个element-tree 中，但是当数据量很大时，就会出现卡段现象。 针对这个问题，我看到有两种解决方式 第一种是给tree设置一个height属性，表示切换为虚拟滚动，使长列表拥有更好的表现。这个是官方给的解决办法，设置了这个属性后，组织树就不能设置懒加载 以及 拖拽的功能。 Element - The world's most popular Vue UI framework 第二种，是采用virtual-scroll-list插件，这个我在别人的博客上看了下，稍微有些复
el-tree数据量过大导致页面卡顿
华灯初上
05-19 3122
树形结构渲染卡顿解决方案
vue element 页面数据（千条）优化
陈庄主的博客
05-21 1442
vue element 页面数据（千条）优化 问题：页面要求展示3000条数据，不允许分页是，页面操作卡顿问题 思路： 1.动态展示部分数据，即只展示可视区域数据，比如10-20条数据； 2.用户滚动查看时替换当前展示的数据； 3.通过slice获取当前应展示的数据（arr.slice(startIndex,endIndex)）; 4.增加滚动元素的padingTop、padingBottom 保证数据一直在视图中； 直接上代码，详情请看注释 js代码 //index.js export default {
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值