ant design vue select选择框虚拟滚动
主要是popupScroll这个方法,具体代码如下
模板
<template>
<a-select :filter-option="false" show-search allowClear style="width:200px" @popupScroll="appendData">
<a-select-option v-for="(item,index) in ArrayData" :key="index" :value="item">
{{ item }}
</a-select-option>
</a-select>
</template>
具体方法
export default {
data(){
return{
ArrayData:[], //选项数据
timer: null
}
},
created(){
this.createData();
},
methods: {
createData(){
for (let i=0; i<50; i++)
{
this.ArrayData.push(this.num); // 生成初始50条选项
}
},
appendData(e){
if(this.timer) clearTimeout(this.timer);
this.timer = setTimeout(()=>{
if(e.target.scrollHeight - e.target.scrollTop <= 300){ // 当滚动条到底部的高度不足300时,向选项数据里面新增20条数据
for(let i=0; i<20; i++){
this.ArrayData.push(i + Date.parse(new Date()));
}
}
}, 600)
}
}
}