ElementUI的autocomplete组件由于后台会传很多的数据用来显示, 可以用下拉加载来处理, 也可以用虚拟滚动来处理, 由于虚拟滚动感觉实现更方便, 以及到下拉出现过多时滚动存在一定性能问题, 所以选择了虚拟滚动 参考代码: klren0312/big-data-autocomplete (github.com) 示例: https://klren0312.github.io/big-data-autocomplete/
用的的第三方库
虚拟滚动使用的是Akryum/vue-virtual-scroller: ⚡️ Blazing fast scrolling for any amount of data (github.com)
它提供了两种组件
- 一个是
RecycleScroller, 当列表每一项高度一样的时候可以使用 - 另一个是
DynamicScroller, 当列表每一项高度是动态变化的时候使用
这次由于是固定高度列表, 所以使用RecycleScroller
修改方法
主要就是对下拉列表进行替换
再将建议弹框组件里的ELScrollbar去除, 以及去除其他关联的代码即可
使用
代码语言：javascript复制<template>
<div id="app">
<auto-complete
v-model="value"
:fetch-suggestions="querySearch"
:popperAppendToBody="true"
placeholder="请输入"
size="mini"
value-key="name"
:clearable="true"
>
</auto-complete>
</div>
</template>
<script>
import AutoComplete from '@/components/AutoComplete'
export default {
name: 'App',
components: {
AutoComplete
},
data() {
return {
value: '',
searchList: [],
selectSearchType: 1,
valueKey: 'name'
}
},
mounted() {
const arr = new Array(10000).fill(1).map((v, i) => {
return {
statId: i,
name: 'test' i
}
})
this.searchList = arr
},
methods: {
querySearch(queryString, cb) {
let filterData = this.searchList
if (queryString && queryString.indexOf('所有') === -1) {
filterData = this.searchList.filter(this.createFilter(queryString))
}
const results = [{ name: '所有', statId: 0 }, ...filterData]
// 调用 callback 返回建议列表的数据
cb(results)
},
createFilter(queryString) {
return string =>
string[this.valueKey]
.toLowerCase()
.indexOf(queryString.toLowerCase()) !== -1
}
}
}
</script>
<style>
</style>
