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

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

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

项目是基于 Vue 框架做的。

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

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

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

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

  el-select(v-model='value' filterable remote :remote-method="remoteMethod" :loading="loading")
       el-option(v-for='item in dataList' :key='item.id' :label='item.label' :value='item.value')    

 remoteMethod(query) {
     if (query !== '') {  // 输入非空时
         this.loading = true   // 显示加载中

         // 获取数据
         setTimeout(() => {
             this.loading = false
             this.dataList = this.dataList.filter(item => {
             return item.label.includes(query)
             })
         }, 200)

     } else {  // 输入为空时
         this.dataaList = []   // 数据为空
     }
 }

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

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

问题解决

END~~~≥ω≤