el-tree组件中数量大出现卡顿问题

翻译 已于 2022-03-02 15:22:52 修改 · 8.6k 阅读 · 6 ·
本内容遵循CC 4.0 BY-SA版权协议
原文链接：https://blog.csdn.net/weixin_44294359/article/details/121533842?spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-3.pc_relevant_antiscan&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edef
标签
#elementui #前端 #javascript
于 2022-03-02 15:20:10 首次发布
本文介绍了两种优化Element-UI Tree组件的方法，应对数据量大导致的性能问题。第一种是设置`height`属性启用虚拟滚动，但会牺牲懒加载和拖拽功能；第二种是使用virtual-scroll-list插件，虽然实现复杂，但性能优化效果显著。作者建议深入研究后者以提升用户体验。

在对话框中嵌入了一个element-tree 中，但是当数据量很大时，就会出现卡顿现象。

针对这个问题，我看到有两种解决方式

第一种是给tree设置一个height属性，表示切换为虚拟滚动，使长列表拥有更好的表现。这个是官方给的解决办法，设置了这个属性后，组织树就不能设置懒加载 以及 拖拽的功能。

Element - The world's most popular Vue UI framework

第二种，是采用virtual-scroll-list插件，这个我在别人的博客上看了下，稍微有些复杂，但是把别人封装的组件源码下载下来看了下，里面的代码写得非常好，值得我去好好学习，哈哈哈哈

el-tree组件展示节点过多时造成页面卡顿、奔溃的解决办法_烂不烂问厨房的博客-CSDN博客

优化El-tree大量数据插入造成页面卡顿问题
努力搬砖的博客
04-01 1723
在一个已采用懒加载方式加载到特定层级的el-tree组件中，现在需要向该层级下的某个节点动态加载并插入大量子数据，并将其渲染至DOM结构中。此时，页面直接无响应卡顿了5秒，经排查发现，是触发了大量Vue3中的instance.update方法。此时应该如何解决呢？
el-tree数据量过大 存在搜索卡顿等情况的解决方案
Study123wf的博客
05-29 2797
*背景:**当开开心心的使用el-tree完成了需求，自认为还做得不错，提测过程中测试发现输入搜索的时候组织树搜索很慢。百思不得其解 百度发现网上有针对卡顿的解决方案:vue+easy+tree。打包成组件后，发布npm，通过。
优化el-tree大数据量搜索卡顿的实战方案
weixin_29010003的博客
04-01 311
本文详细分析了el-tree在大数据量下搜索卡顿的原因，并提供了vue-easy-tree的优化方案，通过虚拟滚动和异步过滤技术显著提升性能。文章还介绍了数据预处理、搜索算法优化和内存管理等深度优化技巧，帮助开发者解决el-tree在大数据场景下的性能瓶颈问题。
解决el-table树形数据量过大，导致卡顿问题
IT_dabai的博客
06-30 7805
element-ui里面的树状表格，当层级和数据过多的时候会出现点击展开和折叠的时候卡顿。这种处理方式会在展开过多时慢慢变得卡顿，所以需要提供一个逻辑，使得用户可以一键回到第一层，且卸载所有子节点。我以为是源码里的逻辑不好，debug源码，但是没有发现原因，后求助同事，得出是dom元素过多导致的。在点击展开的时候，改变display样式，因为元素位置变化，页面发生回流，且元素多，所以开销大。一次性加载所有数据的时候，折叠的元素都已经加载了，只是样式为dispaly：none；
【el-tree大量数据卡顿解决】el-tree利用懒加载解决大数据量卡顿问题，el-tree懒加载回显方法
热门推荐
seeeeeeeeeee的博客
07-04 1万+
问题是这样：我的项目中，有一个角色管理的页面。以前的老代码，直接用el-tree渲染的树形结构，勾选设置对应的权限。其他的部门倒是还好，但是涉及到老板的部门设置的时候，由于我们这边的权限太多，部门也特别多，而老板又是有很多的权限，导致我们一次需要渲染出一大堆的tree结构之外，还需要回显一大堆的勾选。这就导致别的人设置可以，但是老板设置权限的时候就会卡住几十秒，甚至卡死浏览器。所以没办法，只能动手优化一下老代码，让他快一点。这样的属性结构，有很多的层级 el-tree懒加载的功能，一层一层的加载，让页面不会
el-tree数据量过大导致页面卡顿
华灯初上
05-19 3337
树形结构渲染卡顿解决方案
解决el-tree子节点过多导致渲染缓慢问题
m0_52765288的博客
09-04 1万+
el-tree子节点过多导致渲染缓慢问题
优化elemen-ui的el-table的tree树结构因数据过多卡顿问题
兔子的博客
02-06 6651
最近遇到一个要在elemen-ui的el-table放一个树结构的表数据但是因为数据实在过多，而且列也有四五列，还有操作列dom操作频繁导致页面非常的卡顿网上看了很多种方法以及elementui的官方方法使用lazy和load方法终于解决。
el-tree大量数据会导致dom渲染缓慢问题
qq_41920758的博客
06-13 2179
但如果在节点数量在万级以上会有明显的卡顿，若数据量在五万以上可能会导致el-tree假死的情况。注意此方法查询会导致dom渲染卡顿问题，也可以做成你可以做成懒加载的树，搜索查询某个节点时调用接口，让后端返回对应的路径。看看vue-easy-tree的效果。无卡顿，我们通过控制台可以看出，el-tree渲染了所有节点，而虚拟滚动只渲染了可视区域的节点。vue 实现 tree 树形大量数据的多功能虚拟滚动-Virtual Tree_Brad_chao的博客-CSDN博客_vue树形数据展示。
Element UI el-tree 搜索卡顿？试试这个高性能替代方案（附完整配置）
weixin_30836759的博客
03-29 1261
本文针对Element UI的el-tree组件在大数据量下搜索卡顿问题，提出高性能替代方案vue-easy-tree。通过增量搜索算法、智能渲染优化等策略，显著提升万级节点下的搜索流畅度，适用于企业级后台管理系统等场景。
el-tree渲染万级节点不卡顿的5个优化技巧（实测有效）
weixin_29018815的博客
03-09 110
本文针对Element UI的el-tree组件在渲染万级节点时出现的性能卡顿问题，提供了5个实测有效的优化技巧。核心方案包括实施虚拟滚动与动态加载以按需渲染、优化数据响应式处理、以及通过防抖与后端搜索解决搜索卡顿问题。这些方法旨在不更换技术栈的前提下，显著提升大型树形结构的操作流畅度与用户体验。
Element UI Select+Tree组件性能优化指南：解决万级节点卡顿问题
weixin_27943395的博客
03-05 283
本文深入剖析了Element UI中Select与Tree组件结合时，在万级数据量下出现卡顿的性能瓶颈根源，并提供了从虚拟滚动、数据懒加载到高效搜索的完整优化方案。针对树状下拉选择器的封装场景，重点介绍了如何通过虚拟滚动技术解决DOM节点爆炸问题，有效提升大型树形结构的交互流畅度与渲染性能。
element ui tree 图标_Vue树形组件之--smart-tree
weixin_39972777的博客
11-19 222
前言最近使用Vue写了一个树形组件，为什么不用开源的第三方控件呢，主要是因为项目中有一些特殊的要求。比如，项目中要求树组件能支持数万个节点的流畅显示，还有一些拖拽的自定义显示等问题。而这种情况下，element-ui里面的el-tree显然不够用了。原理我们知道，当dom节点过多时，HTML页面就会卡顿，因此优化的方向就是减少dom元素的数量。在这个组件中，我只显示了可视区域的范围。而当滚动条滚动...
Vue项目里el-tree渲染5w个文件卡死？试试这个virtual-scroll-list改造方案
weixin_28704239的博客
04-13 199
本文针对Vue项目中el-tree渲染5万节点导致的页面卡顿问题，提出基于virtual-scroll-list的虚拟滚动改造方案。通过按需渲染技术，将DOM节点数减少99.9%，内存占用降低93%，实现从12.8秒到0.3秒的加载速度提升，有效解决页面卡顿和崩溃问题。
vue3.0 使用el-tree节点添加自定义图标造成加载缓慢的多种解决办法
weixin_43891869的博客
10-27 1177
Vue3+Element Plus树形组件优化方案 针对el-tree/el-tree-v2添加自定义图标后渲染卡顿问题，提供系统性优化方案： 核心问题 大量节点搭配插槽图标导致VNode暴增 动态组件/内联SVG重复解析 深层响应式依赖追踪开销大 快速见效方案 千级数据改用el-tree-v2虚拟滚动 图标用CSS类/SVG sprite替代组件 树数据用markRaw/shallowRef处理 深度优化 懒加载+延迟渲染(render-after-expand) 缓存图标组件并标记原始值 避免内联大SV
element ui 树形嵌套表格_Vue树形组件之--smart-tree
weixin_32058931的博客
12-28 1500
前言最近使用Vue写了一个树形组件，为什么不用开源的第三方控件呢，主要是因为项目中有一些特殊的要求。比如，项目中要求树组件能支持数万个节点的流畅显示，还有一些拖拽的自定义显示等问题。而这种情况下，element-ui里面的el-tree显然不够用了。原理我们知道，当dom节点过多时，HTML页面就会卡顿，因此优化的方向就是减少dom元素的数量。在这个组件中，我只显示了可视区域的范围。而当滚动条滚动...
Vue 虚拟滚动树组件实战：从卡顿到丝滑处理海量 Tree 数据
最新发布
weixin_30367873的博客
04-18 462
本文详细介绍了如何利用Vue虚拟滚动技术优化树形组件性能，解决海量Tree数据导致的卡顿问题。通过vue-virtual-scroller实现只渲染可视区域节点，内存占用降低90%以上，滚动流畅度提升至60FPS。文章包含技术选型、深度改造方案、功能兼容处理及性能优化技巧，帮助开发者高效处理大数据场景下的树形结构展示。
使用element-plus的el-tree-v2时，如何处理选中checked数据为万级别卡顿情况？
weixin_45190306的博客
02-28 206
本文探讨了el-tree-v2组件在大数据量树形结构中的应用问题及优化方案。作者因数据量过大选择el-tree-v2而非el-tree，但面临两个主要问题：1）组件不直接支持disabled方法，需通过递归遍历设置节点禁用状态；2）当选中数据量超过万级时性能急剧下降。针对性能问题，提出了两种解决方案：使用check-strictly属性可显著改善（加载时间从卡死降至1分钟），或自定义checkbox组件替代原生实现。文章强调具体方案需根据实际需求权衡选择，为处理大型树结构提供了实用参考。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值