el-select选项过多导致页面卡顿，路由跳转卡顿

已于 2024-01-23 14:25:12 修改
阅读量1k 收藏 10
点赞数 7
文章标签： vue.js 前端 javascript
于 2024-01-23 11:29:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/G_ruirui/article/details/135767293
版权
本文讨论了el-select组件在数据量大时的性能问题，提出通过VirtualizedSelect实现虚拟化渲染、分页处理以及滚动加载和自定义筛选来缓解卡顿和内存压力。
摘要由CSDN通过智能技术生成

问题：el-select数据量太大，导致渲染过慢，或造成页面卡顿甚至于卡死

卡顿原因：DOM中数据过多，超过内存限制

解决方法：

1.使用Virtualized Select 虚拟化选择器，页面就不卡了

2.el-select做分页，后端可能会不太想改，可以按照需求用computer做分页

3.可以使用滚动加载与自定义筛选

我看过的文章1：解决el-select数据量过大导致页面卡顿
文章2：el-select选项过多导致卡顿的解决方案
文章3：对el-select进行二次封装，解决数据量过大造成页面卡顿问题

北里新妆
关注
  • 7
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-select数据过多懒加载的解决(loadmore)
10-16
主要介绍了el-select数据过多懒加载的解决(loadmore)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
返回数据量太大时，使用 el-select 分页展示，避免渲染卡顿
最新发布
weixin_41424911的博客
07-18 211
select 数据量太大时，渲染卡顿，进行分页展示
对el-select进行二次封装，解决数据量过大造成页面卡顿问题
qq_44473483的博客
12-30 3965
解决select数据量过多造成的页面卡顿
element el-select数据量过大 造成页面卡死情况（解决）
qq_52099965的博客
06-18 377
element el-select数据量过大 造成页面卡死情况（解决）
解决el-select下拉列表数据量过大卡顿问题
Y_seaboy的博客
11-08 1133
使用vue-virtual-scroll-list虚拟列表，解决el-select下拉数据量过大页面卡顿问题
Element ui 解决Cascader 级联选择器卡顿问题【一定要看哦】
qq_30193097的博客
06-02 1455
解决Cascader 级联选择器卡顿问题
解决Element UI el-select数据太多造成页面卡顿
weixin_48624392的博客
02-01 1975
问题：el-select接收后端放回的数据太过庞大（成千上万条），导致页面渲染的时候造成卡顿现象。去让后端那边重新调整数据会加大后端的工作量，如何从前端解决这个问题呢？解决：利用触底加载方法减少资源的消耗，避免页面卡顿。监听到下拉滚动事件，当下拉宽高度+可滑动高度距离底部的距离 > 可滑动高度时，增加数据访问量。
el-select选项过多导致卡顿的解决方案
qq_47858671的博客
09-16 1566
创建select-load-more.js// el-select组件数据过多，使用翻页加载数据指令});});在main.js中加入引入并使用自定义指令//引入自定义指令,懒加载el-selecttemplate部分<el-select v-model="value" @change="changSelect" placeholder="请选择作业类型" v-selectLazyLoad="() => loadMore()">methods部分/* 加载更多数据 */},
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-...
vue2+el-menu实现路由跳转及当前项的设置方法实例
08-28
Vue2+El-Menu 实现路由跳转及当前项的设置方法实例 Vue.js 是一套构建用户界面的渐进式框架，它采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。 vue2+...
详解element-ui中el-select的默认选择项问题
10-16
在给出的代码片段中，`query`变量被用作`v-model`，并初始化为`'02'`，这意味着组件加载时，`el-select`会显示值为`'02'`的选项，即“你的”。 设置默认值的关键在于确保`v-model`的初始值与`el-option`中的某个`...
Element-ui中 选择器（Select）数据多过导致渲染慢、页面卡顿的问题
ploki8的博客
08-22 996
Element-ui中 选择器（Select）数据多过导致渲染慢、页面卡顿的问题
element Cascader级联选择器数据多时卡顿问题记录并解决
wxid_mtnujb6ipc0322的博客
12-12 2031
方案二更多的用到了数组的方法，所以数组方法一定要牢记，注意双向绑定！当然，若小伙伴有其他更好的解决方案，也欢迎留言。
el-select数据量过大引发卡顿，怎么办？
华为云官方博客
06-16 4563
经典问题：在测试环境好好的，怎么到正式环境就不行了？
关于多个elementui的cascader级联组件页面滚动渲染样式导致卡顿问题
qq_38828542的博客
10-25 896
如题，多个cascader级联组件，下拉选项含大量数据，滚动时会有实时样式重新渲染，导致CUP内存溢满而卡顿。小优化技巧：可加loading一次性加载完多个cascader级联组件后再允许页面滚动。方法一：使用elementui中的内部源码的方法处理（推荐）方法二：强制写入display: none;
ElementUI中的 Cascader 级联选择器 卡顿问题
yinge0508的博客
12-24 4982
当数据多的时候可能出现卡顿的情况，在点击小叉号进行删除已经选择的时候，也可能会出现卡顿的情况，在当重置清空数据的时候，使用一下方式或许会避免 页面卡顿， let obj = {} obj.stopPropagation = () => {} try{ this.$refs.cascader.clearValue(obj) }catch(err){ this.$refs.cascader.handleClear(obj)
elementUi——Cascader 级联选择器渲染数据很多时卡顿问题解决
热门推荐
yehaocheng520的博客
06-11 1万+
上周在做后台管理系统时，有用到了级联选择器，这个级联选择器主要用于分组展示的数据，比如省市区三级两级联动等。 elementUi中的cascader级联选择器官网链接：https://element.eleme.cn/#/zh-CN/component/cascader 使用方法也是比较的简单，主要有以下几个参数： 一个最基本的级联选择器代码如下： <el-cascader v-model="value" :options="options" @change="handleChange">&l
el-select数据过多的解决（纯前端）
weixin_41897680的博客
09-05 5189
el-select数据过多的解决（纯前端）
vue el-select数据量太大，导致浏览器崩溃解决办法
askuld的博客
03-29 1828
下拉数据量太大，浏览器单线程渲染时间较长，会导致浏览器崩溃。为了解决这一问题，可以采用懒加载形式，完美解决。下拉选项变化时候涉及到滚动条定位问题，el-select设置滚动条再最顶端，复制下面代码即可。:filter-method="filterMethod"自定义筛选方法，支持筛选。v-el-select-loadmore="loadmore" 懒加载方法。以上代码段跟data()同级别。
el-select数据量过大卡顿
08-28
el-select数据量过大卡顿是因为在正式生产环境中，可选数据leaderOptions的数量达到了将近两万左右，导致组件出现卡顿现象。为了解决这个问题，可以采取一种思路是减少el-select的可选项数量。一种实施方案是构造一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值