vue3使用ant-design的select实现下拉框滚动分页加载

实现下拉框滚动加载远程数据

<a-select
  v-model:value="formState.merchantName"
   mode="multiple"
   style="width: 100%;"
   :defaultOpen="false"
   placeholder="请选择客户名称"
   :filter-option="false"
   @deselect="deleteSelect"
   @popupScroll="popupScroll"
   @select="select"
   @dropdownVisibleChange="dropdownVisibleChange"
   @search="searchMerchantList"
 >
   <template #menuItemSelectedIcon>
     <my-icon style="margin: 0 5px;" type="icon-check"></my-icon>
   </template>
   <a-select-option
     @click="clickOption(item)"
     :key="item.value"
     :value="item.value"
     v-for="item in merchantListOptions"
     :disabled="item.contained === 1">
     {{item.label}}
   </a-select-option>
 </a-select>

数据逻辑，未补全的参数请根据需要自行添加，以下代码仅展示关键逻辑

<script lang="ts">
  import { defineComponent, reactive, ref, watch, nextTick } from 'vue';
  export default defineComponent({

      const totalCount = ref(0)
      const pageNum = ref(1)
      const pageSize = ref(10)
      const isLoading = ref(false)
      // 查询数据
      const getList = (merchantName = '') => {
      	isLoading.value = true
        // 异步获取远程数据
      	isLoading.value = false
      };
      // 滚动加载
      const popupScroll = (e: any) => {
        const { target } = e;
        // 滚动 触底 看接口是否还有剩余的值没传过来
        if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
          if (pageNum.value * pageSize.value < totalCount.value) {
            // 每滚动一次，多加载20条数据
            pageNum.value = 1
            pageSize.value = pageSize.value + 20
            getList()
          }
        }
      }
      // 远程搜索
      const searchKey = ref('')
      const searchMerchantList = debounce((val: string) => {
        pageNum.value = 1
        pageSize.value = 10
        searchKey.value = val
        getList(val)
      }, 500);
      // 关闭下拉框时，如果存在搜索关键字，则证明有搜索记录，需要重新发起请求，获取原始值
      const dropdownVisibleChange = (open: boolean) => {
        if (!open && searchKey.value) {
          searchKey.value = ''
          pageNum.value = 1
          pageSize.value = 10
          getList()
        }
      };
      return {
        merchantListOptions,
        selectedValue,
        isLoading,
        deleteSelect,
        popupScroll,
        clickOption,
        select,
        searchMerchantList,
        dropdownVisibleChange,
        selectedOptions,
      }
    }
  })
</script>