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)
    }
  }
}
posted @ 2021-02-19 17:39  海潮123  阅读(2366)  评论(2)    收藏  举报