Scroll function of select component in antdv

Posted May 27, 20202 min read

Suitable for scenes with fuzzy search + paging scroll loading function

//html
<a-select
  show-search
  :value = "selectedVal"
  placeholder = "input text for search"
  style = "width:100%"
  :filter-option = "false"
  :not-found-content = "null"
  @ popupScroll = "handlePopupScroll"
  @ search = "filterOpts"
  @ change = "clickOpt"
>
  <a-select-option v-for = "item in dataList":key = "item"> {{item}} </a-select-option>
</a-select>

//Variable definitions
selectedVal:string = ''; //value value bound to select component
pageNum:number = 1; //number of pages currently loaded
pageSize:number = 10; //Number of data loaded per page
data:any = {}; //response information returned by the server
dataList:any = []; //Search match data in the response information returned by the server
timer:any = null; //Timer, control request frequency

//First define the method to get the list of search options
//The structure of the response data:
//{
//data:{
//dataList:[
//'val1',
//'val2',
//...
//],
//totalCount:20,
//totalPage:3
//}
//}

  getDataList() {
    this.getAxios(projectFindLdap, {
      keyWord:this.selectedVal,
      pageNumber:this.pageNum,
      pageSize:this.pageSize
    }). then((res:any) => {
      this.data = res.data;
      if(this.dataList.length <= this.data.totalCount) {
        this.dataList.push(... res.data.dataList);
      }
    })
  }

  //Callback when the text box value changes
  filterOpts(val:string) {
    this.selectedVal = val;
    if(this.selectedVal) {
      clearTimeout(this.timer);
      this.dataList = [];
      this.pageNum = 1;
      this.pageSize = 10;
      this.timer = setTimeout(() => {
        this.getDataList();
      }, 500)
    }
  }

  //Load data when the list scrolls
  handlePopupScroll() {
    if(this.pageNum <this.data.totalPage) {
      this.pageNum + = 1;
      this.getDataList();
    }
  }

  //select option call
  clickLdapOpt(val:string) {
    this.selectedVal = val;
  }