当el-select 组件面临大数据量时,确实可能会遇到性能问题,如加载缓慢、卡顿等。以下是对这一问题的详细分析以及优化方案的解答: 分析el-select 数据过多的具体表现和问题: 当el-select 组件的选项数据量非常大时,渲染下拉选项会消耗大量的计算资源和时间,导致界面卡顿或加载缓慢。 大数据量还可能增加 DOM 节点的数...
(1).创建directive.js,自定义指令el-select-loadmore,按需加载数据: constinstall=function(Vue){// el-select组件数据过多,使用翻页加载数据指令Vue.directive('el-select-loadmore',{bind(el,binding){constSELECTWRAP_DOM=el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');SELECTWRAP_DOM....
解决element-ui el-select数据过大方案 一、背景 项目中需要用到el-select选择医院,全国医院数据量非常大,通过API读取数据页面直接卡死。 二、解决方案 1、组件:el-select + vue虚拟滚动(vue-virtual-scroll-list) 2、安装:npm install vue-virtual-scroll-list --save 3、参考: NPM地址:https://www.npmjs....
一开始就考虑使用简单el-select选取数据,但是后面数据量增多, 超过一千条开始,组件会很卡不好用,第二个是接口也慢了 数据量多的话是有一个filterable做支持了,可以输入关键字进行匹配检索 但是不能解决卡顿的问题,接口还是比较慢 二、替代方案: 然后改用了el-autocomplete组件,自动补全,在官网上是没有这个文档说明...
</el-select> 问题出在测试环境时,el-select的可选数据 leaderOptions的量级顶多100多人,而到了正式生产环境中,leaderOptions达到了将近两万左右,从而造成了组件卡顿。 因此,解决问题的方式就是,如何降低el-select的可选项 leaderOptions的数量。 两种解决思路 ...
用人会说element-ui的select有一个remote-method,支持远程搜索,我们让服务端支持一下不就可以了,当然这是一种解决的方案。但是有时候这种方法有时候不一定适用 (1)有时候服务端数据是经过计算返回给我们的,可能返回不是特别快,体验不是很好 (2)有时候数据可能只有几千条,全部渲染又不太合适,一直掉接口不是特别好...
当我们使用el-select选择器下拉数据很大的时候,会出现页面卡顿,甚至卡死的情况,用户体验很不好。我目前采取的方案是使用虚拟列表的方式去处理这个问题。 实现效果 数据获取完毕: 点击输入框:我们可以看到 2 万条数据只展示了 30 条。 我们滚动找到 kaimo-666,选择它 ...
问题的来源通常涉及数据量的剧增。以一个后台管理系统为例,该系统利用Element-UI的el-select组件允许用户从当前操作人有权控制的众多人员中选择一位作为领导。在测试环境下,这一操作运行顺畅,然而一旦部署至正式环境,可选项数量激增至近两万,导致组件性能下降,出现卡顿。为解决这一问题,我们分析了两种...
参考地址:el-select的数据太多时候导致卡顿 修改时,展示已选中的选项(已使用上面的解决方法的情况下) // 解决方案是:在展示前,循环总数据把选中的放在paperList的最前面let paperArr=[1,2,3];this.record={paperArr:paperArr};for(constitem ofthis.examPaperSelStore.list){if(paperArr.indexOf(item.id)!