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

已于 2022-03-02 15:22:52 修改
阅读量7.2k 收藏 5
点赞数
分类专栏： web前端 文章标签： elementui 前端 javascript
于 2022-03-02 15:20:10 首次发布
原文链接：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
版权

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

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

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

Element - The world's most popular Vue UI framework

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

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

热爱生活的码农
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
el-select-tree:ElementUI的el-select与el-tree结合
05-07
精选树 ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-select-tree/lib/element-ui' ; 全球注册 import Vue from 'vue' ; import ElSelectTree from 'el-select-tree' ; Vue . use ( ElSelectTree ) ; 组件内注册 import ElSelectTree from 'el-select-tree' ; export default { components : { ElSelectTree } } ; 完
el-tree数据量过大，造成浏览器卡死、崩溃
qq_41838435的博客
12-05 2224
树形结构展示，数据超级多，超过万条，每次打开都会崩溃
el-tree加载数据量大（1万+数据）页面渲染慢优化
qq_44716001的博客
12-26 713
【代码】el-tree加载数据量大（1万+数据）页面渲染慢优化。
优化El-tree大量数据插入造成页面卡顿问题
最新发布
努力搬砖的博客
04-01 316
在一个已采用懒加载方式加载到特定层级的el-tree组件中，现在需要向该层级下的某个节点动态加载并插入大量子数据，并将其渲染至DOM结构中。此时，页面直接无响应卡顿了5秒，经排查发现，是触发了大量Vue3中的instance.update方法。此时应该如何解决呢？
el-tree数据量过大导致页面卡顿
华灯初上
05-19 2116
树形结构渲染卡顿解决方案
VirtualTrees完整可用
02-02
VirtualTrees完整可用。 Virtual Treeview is designed for Delphi 4 and higher and can also be used with Borland C++ Builder 4 and up. The entire implementation covers only 4 files: 1、VirtualTrees.pas - the code 2、VirtualTrees.dcr - the design time resource 3、VirtualTrees.res - the run time resource 4、DFS.inc - a small include file written by Brad Stowers used to determine the Delphi or BCB version you are trying to compile with With these four files it is extremely easy to install the trees. Just put the files into your library folder and add VirtualTrees.pas to any of your packages. I'm sure you have at least one third-party package, haven't you? If not just create one via Component | Install Component | Into new package
【el-tree大量数据卡顿解决】el-tree利用懒加载解决大数据量卡顿问题，el-tree懒加载回显方法
seeeeeeeeeee的博客
07-04 7883
问题是这样：我的项目中，有一个角色管理的页面。以前的老代码，直接用el-tree渲染的树形结构，勾选设置对应的权限。其他的部门倒是还好，但是涉及到老板的部门设置的时候，由于我们这边的权限太多，部门也特别多，而老板又是有很多的权限，导致我们一次需要渲染出一大堆的tree结构之外，还需要回显一大堆的勾选。这就导致别的人设置可以，但是老板设置权限的时候就会卡住几十秒，甚至卡死浏览器。所以没办法，只能动手优化一下老代码，让他快一点。这样的属性结构，有很多的层级 el-tree懒加载的功能，一层一层的加载，让页面不会
解决el-tree子节点过多导致渲染缓慢问题
m0_52765288的博客
09-04 8261
el-tree子节点过多导致渲染缓慢问题
el-tree组件展示节点过多时造成页面卡顿、奔溃的解决办法
m0_54850825的博客
03-12 7182
解决el-tree组件展示节点过多时造成页面卡顿、奔溃 前几天测试提了个BUG，文件列表展示5w个文件页面会卡顿甚至奔溃。 项目用的是vue+element-ui框架，我是使用el-tree进行渲染文件列表的。 参考网上使用virtual-scroll-list插件与el-tree源码写成一个新组件。virtual-scroll-list可以只渲染页面呈现部分的节点，这样就不会造成卡顿了，源el-tree是直接将5w个节点直接渲染到页面，导致页面奔溃。 这是使用virtual-scroll-list插件与e
el-tree懒加载数据量太大的解决方案
qq_42401946的博客
03-03 4756
一、 找到路径：node_modules => element-ui => packages => tree ,然后把tree这个文件夹拷贝下来，放到自己项目文件价里，比如，我放到了components文件夹里。 二、 打开node.js文件，找到doCreateChildren方法，把这段代码加上 if (array && array.length > 2000) { let arr = array.splice(60, array.length - 6
在element-ui的el-tree组件中用render函数生成el-button的实例代码
10-17
主要介绍了在element-ui的el-tree组件中用render函数生成el-button 的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
element el-tree组件的动态加载、新增、更新节点的实现
10-15
主要介绍了element el-tree组件的动态加载、新增、更新节点的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
el-tree-select:基于el-select和el-tree改造的树形选择器（下拉框）组件
05-10
树选择 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build
el-tree 树形数据量过大，查询卡顿处理
qq_34811855的博客
01-30 733
【代码】el-tree 树形数据量过大，查询卡顿处理。
当element中的tree组件数据量超过万条处理方式
fangyes888的博客
09-14 1万+
就是很普通的树形结构，所存在的问题就是，返回的数据中，子集可能有几条几万条不等，存在的问题也显而易见了 数据量过大，样式越复杂，浏览器舒渲染的过程就会越慢。 经过再三思考，应该有三种方式可以处理（方法肯定不止三种） html // 这里我使用的是render-content方式生成tree组件样式 <div class="cont" ref="list" @scroll="handleScroll($event)"> <el-tree
elementui树形表格数据量大时，会造成严重卡顿问题的解决方案
热门推荐
qq_40639028的博客
03-17 1万+
之所以会造成卡顿，是因为该组件是一次性将所有数据全部渲染，dom数量过于庞大，并且在展开树操作的时候，用了大量递归循环语句，性能受到严重影响，造成卡顿。 我想到的解决方式有两种： 一：分页，让后端添加分页查询，以节点数统计数据条数进行展示。（但实际需求中较少，一般树形表格都是不分页）。 二：将请求到的树形数组数据备份（tableDataCopy），初始化仅仅展示指定层级（如第一层树）的数据，将第一层下面的所有的children全部置为null，并记录存在children的节点，设置hasChild..
大数据量树形数据表格展示, umy-ui,
yingw1的博客
04-11 3663
树形表格加复选框以及树形的搜索定位
封装el-tree组件
03-29
封装el-tree组件的步骤如下： 1. 引入Element UI库 在项目中引入Element UI库，以便使用el-tree组件。 2. 创建一个vue组件 使用Vue框架创建一个组件，可以使用单文件组件或者普通的Vue组件。 3. 注册el-tree组件 在Vue组件中注册el-tree组件，可以使用全局注册或局部注册的方式。 4. 定义el-tree组件的props属性 定义el-tree组件的props属性，用于接收父组件传递的数据。 5. 定义el-tree组件的data属性 定义el-tree组件的data属性，用于存储el-tree组件的状态数据。 6. 定义el-tree组件的methods方法 定义el-tree组件的methods方法，用于处理el-tree组件的事件和逻辑。 7. 编写el-tree组件的template模板 编写el-tree组件的template模板，用于渲染el-tree组件的界面。 8. 在父组件中使用el-tree组件 在父组件中使用el-tree组件，并传递相应的props属性，即可使用封装好的el-tree组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值