el-select实现触底加载 当我们使用el-select下拉框的时候,会遇到后端放回的数据太过庞大(成千上万条),导致页面渲染的时候造成卡顿现象。这时候我们可以利用触底加载方法减少资源的消耗,避免页面卡顿。 思路:这时候我们可以利用vue的自定义指令,监听到他的下拉滚动事件,当滚动到最后时,(下拉宽高度+可滑动高度距离底部...
针对您提出的 el-select 数据过大导致的卡顿问题,我们可以从以下几个方面进行分析和优化: 1. 分析el-select组件数据过大的原因 数据量过大:当 el-select 的选项(el-option)数量非常多时,DOM的渲染和浏览器的重绘/回流会变得非常耗时,从而导致卡顿。 数据绑定方式:如果 el-select 的数据是直接通过 v-for 绑定...
需求就是批量编辑,无法更改需求为单行编辑 所以在这个需求的基础上,如何才能减少卡顿呢? 每一行的数据存在3个以上的 el-select 组件,部分组件的下拉数据存在几十条 和产品商量一下改变交互吧,同一时间内用户应该只能改变一个下拉框的值,所以没必要把所有的下拉框同时渲染出来。可以通过双击单元格或者单独在单元格内放...
</el-select> 问题出在测试环境时,el-select的可选数据 leaderOptions的量级顶多100多人,而到了正式生产环境中,leaderOptions达到了将近两万左右,从而造成了组件卡顿。 因此,解决问题的方式就是,如何降低el-select的可选项 leaderOptions的数量。 两种解决思路 我们认为有两种解决思路: 前后端配合 这种方式的优点是,...
el-select下拉框的选项太多时会卡顿,影响体验,使用下拉框选项分页来解决,即elementUI的分页插件和el-select插件组合使用 效果 我这里有个el-input输入框做模糊查询 <el-selectv-model="form.kmdm"style="width: 320px"><el-inputv-model="inputVal":clearable="true"v-on:input="filterKm(inputVal)"style=...
el-table嵌套el-select和el-input,循环出几百条或几千条数据时,下拉框选中回显卡顿和输入卡顿的问题el-input已找到了解决思路,如下:用原生input替换el-input,以减少el-input组件实例。并在原生input上应用el-input的样式,使前者后者外观一致。在v-model指令上追加.lazy修饰符,使实例数据仅在失去焦点时更新,减少触发...
<el-selectv-model="name"><el-optionlabel="1"value="1"></el-option><el-optionlabel="2"value="2"></el-option></el-select><el-iconsize="18"><Setting/></el-icon> 如上代码,会引起下拉框卡顿,很长时间才弹出下拉选项。 测试去掉size="18"或者将Setting图标换成其他图标可以规避该情况。
当我们使用el-select选择器下拉数据很大的时候,会出现页面卡顿,甚至卡死的情况,用户体验很不好。我目前采取的方案是使用虚拟列表的方式去处理这个问题。 实现效果 数据获取完毕: 点击输入框:我们可以看到 2 万条数据只展示了 30 条。 我们滚动找到 kaimo-666,选择它 ...
问题的来源通常涉及数据量的剧增。以一个后台管理系统为例，该系统利用Element-UI的el-select组件允许用户从当前操作人有权控制的众多人员中选择一位作为领导。在测试环境下，这一操作运行顺畅，然而一旦部署至正式环境，可选项数量激增至近两万，导致组件性能下降，出现卡顿。为解决这一问题，我们分析了两种...