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

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

 

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

项目是基于 Vue 框架做的。

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

我做的条数有 1600+ 条 ,导致有 6 秒左右的延时

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

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

 

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

 

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

 

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

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

问题解决

 

 

 END~~~≥ω≤

 

posted @ 2018-02-26 16:34  yuhui_yin  阅读(789)  评论(0编辑  收藏  举报