如果数据量不是特别大,可以优先考虑分页加载;如果数据量极大且需要频繁更新,可能需要考虑使用虚拟滚动或自定义组件。 5. 测试优化后的el-select性能 在实施优化方案后,需要对 el-select 的性能进行测试,以确保卡顿问题得到解决。可以使用浏览器的性能分析工具(如Chrome的DevTools中的Performance面板)来监测渲染时间、内存...
</el-select> 问题出在测试环境时,el-select的可选数据 leaderOptions的量级顶多100多人,而到了正式生产环境中,leaderOptions达到了将近两万左右,从而造成了组件卡顿。 因此,解决问题的方式就是,如何降低el-select的可选项 leaderOptions的数量。 两种解决思路 我们认为有两种解决思路: 前后端配合 这种方式的优点是,...
当我们使用el-select下拉框的时候,会遇到后端放回的数据太过庞大(成千上万条),导致页面渲染的时候造成卡顿现象。这时候我们可以利用触底加载方法减少资源的消耗,避免页面卡顿。 思路:这时候我们可以利用vue的自定义指令,监听到他的下拉滚动事件,当滚动到最后时,(下拉宽高度+可滑动高度距离底部的距离 > 可滑动高度)...
我们再次点击输入框,我们以及定位到了 kaimo-666 这个位置 另外拓展了点击项目跟输入框数据改变的事件 源码导致 我基于 vue-virtual-scroll-list 跟 element-ui 实现了下拉虚拟列表,解决下拉选择框数据量大时卡顿问题。 代码地址:https://github.com/kaimo313/select-virt...
除了数据量外，其他因素如网络延迟、数据库性能等也可能导致用户体验的下降。总结来说，通过合理调整数据返回策略和前端优化，可以有效解决el-select组件在处理大量数据时的卡顿问题。在实际应用中，灵活运用这些方法，结合团队协作与沟通，可以有效提升系统的整体性能和用户体验。
参考地址:el-select的数据太多时候导致卡顿 修改时,展示已选中的选项(已使用上面的解决方法的情况下) // 解决方案是:在展示前,循环总数据把选中的放在paperList的最前面let paperArr=[1,2,3];this.record={paperArr:paperArr};for(constitem ofthis.examPaperSelStore.list){if(paperArr.indexOf(item.id)!
el-table嵌套el-select和el-input,循环出几百条或几千条数据时,下拉框选中回显卡顿和输入卡顿的问题el-input已找到了解决思路,如下:用原生input替换el-input,以减少el-input组件实例。并在原生input上应用el-input的样式,使前者后者外观一致。在v-model指令上追加.lazy修饰符,使实例数据仅在失去焦点时更新,减少触发...
多个页面调用同一个接口 作为下拉框的选项数据,接口返回上千条 导致页面异常卡顿 解决办法: 使用Select V2 虚拟列表选择器 代码示例: <el-form-itemlabel="场所名称"><el-select-v2class="row-inp"v-model="queryForm.id":options="placeData"clearable filterable placeholder="请选择场所"></el-select-v2><...
每个el-select里的option数量其实并不多,大概10个左右。 但是当用户插入10条数据的时候,也就是页面里el-table里有将近300个el-select组件的时候,很明显的卡顿就出现。 将近3-4秒,如果操作过于频繁甚至会更久。 如果用源生的select跟option标签替换所有el-select去除冗余dom后的确效率会快很多,但是也缺失了很多el-...