本文地址： 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~~~≥ω≤