antdv中select组件的滚动加载功能

适用于具有模糊搜索+分页滚动加载功能的场景

// 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>

// 变量定义
selectedVal：string = ''; // select组件绑定的value值
pageNum: number = 1; // 当前加载的页数
pageSize: number = 10; // 每页加载的数据个数
data: any = {}; // 服务器返回的响应信息
dataList: any = []; // 服务器返回的响应信息中的搜索匹配项数据
timer: any = null; // 定时器，控制请求频率

// 首先定义获取搜索选项列表的方法
// 响应数据的结构：
// {
//   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);
      }
    })
  }

  // 文本框值变化时回调
  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)
    }
  }

  // 列表滚动时加载数据
  handlePopupScroll () {
    if (this.pageNum < this.data.totalPage) {
      this.pageNum += 1;
      this.getDataList();
    }
  }

  // 选中 option 调用
  clickLdapOpt (val: string) {
    this.selectedVal = val;
  }