实现效果

实现思路

1. 初始化加载第一页；
2. 监听下拉框的滚动事件，当滚动到底部的时候加载下一页；
3. 输入搜索时，重置为第一页加载；
4. 关闭下拉选择框时，判断如果存在搜索值，要清空搜索值、并加载第一页。

实现代码

html

<a-selectv-model:value="values":mode="multiple":show-search="true":filter-option="false":default-active-first-option="false"@popupScroll="onPopupScroll"@search="onSearch"@dropdownVisibleChange="onDropdownVisibleChange"
><a-select-option v-for="item in optionList" :key="`${item.value}-${refreshFlag}`" :value="item.value"><div :title="item.label">{{ item.label }}</div></a-select-option><a-select-option v-if="loading" disabled value="loading"><a-spin :spinning="true"></a-spin></a-select-option>
</a-select>

ts

const optionList = ref<{ label: string; value: string }[]>([]);
const loading = ref<boolean>(false);
const keyWord = ref<string>('');
const curPage = ref<number>(0);
const total = ref<number>(0);
const refreshFlag = ref<number>(1);// 最终搜索接口
const onRelationSearch = debounce(async (page = 1, curlist = []) => {try {const params: any = {condition: {keyWord: keyWord.value,},paging: {pageIndex: page,pageSize: 20,},};const res = await oneFunction(params);const dataList = res?.result || [];optionList.value = [...curlist,...dataList.map((item: any) => {return {label: item.name,value: item.id,};});];refreshFlag.value++;curPage.value = page;total.value = res?.result?.pageResult?.totalCount || 0;} finally {loading.value = false;}
}, 300);// 搜索前置判断
const getListBefore = (page: number, list: { label: string; value: string }[]) => {// _props传入 分页， 现有列表，输入框内容// 当不是第一页切 列表数量大于等于总数时终止掉if (page !== 1 && list.length >= total.value) {message.warning('没有更多数据了');} else if (loading.value) {// 如果处于加载中也终止掉return;}// 请求，加载中loading.value = true;// 请求接口onRelationSearch(page, list);
};// 滚动事件
const onPopupScroll = (event: any) => {const { target } = event;if (target.scrollTop + target.offsetHeight === target.scrollHeight) {// 调用加载数据，传入需求请求的分页getListBefore(curPage.value + 1, optionList.value);}
};// 搜索事件
const onSearch = (value: any) => {loading.value = false;optionList.value = [];keyWord.value = value;getListBefore(1, []);
};const onDropdownVisibleChange = debounce((open: boolean) => {if (!open && keyWord.value) {loading.value = false;keyWord.value = '';optionList.value = [];getListBefore(1, []);}
}, 300);