el-option > 1500 条时的卡顿问题

本文地址： http://www.cnblogs.com/veinyin/p/8473938.html 

 

在做项目时遇到的一个问题。

项目是基于 Vue 框架做的。

select 的 option 是通过 v-for 循环出来的，在条数较少时是非常方便的，但问题在于当条数多了之后就会出现卡顿现象。

我做的条数有 1600 条 ，导致有 6 秒左右的延时，查找了很久之后发现的 bug 源头。

可以把 Select 选择器做成远程搜索的效果。

不要把后台返回的数据直接用 v-for 显示出来，而是经过搜索缓冲一步。

 

1  el-select(v-model='detail.siteName' filterable remote placeholder='请输入站点名' :remote-method="remoteMethod" :loading="loading")
2       el-option(v-for='site in newSiteList' :key='site.id' :label='site.siteName' :value='site.siteName')    

 

 1 remoteMethod(query) {
 2     if (query !== '') {  // 输入非空时
 3         this.loading = true   // 显示加载中
 4 
 5         // 获取数据
 6         setTimeout(() => {
 7             this.loading = false
 8             this.newSiteList = this.siteList.filter(item => {
 9             return item.siteName.includes(query)
10             })
11         }, 200)
12         
13     } else {  // 输入为空时
14         this.newSiteList = []   // 数据为空
15     }
16 }

 

当然这只是一种解决方案，也可以去麻烦一下后台做成这个效果。

也就是输入关键字后再显示下拉 option 。

问题解决

 

 

 END~~~≥ω≤