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

ant-design的官方文档没有直接的虚拟滚动案例，但是提供了popupScroll -- 下拉列表滚动时的回调，根据这个参数可以获取滚动条的相关参数，当滚动条触底时进行一次分页加载，以下是我的代码案例：

<template>
	<a-card>
		<a-select
			style="width: 600px"
			show-search
			optionFilterProp="label"
			v-model:value="mineName"
			placeholder="请选择设备需求计划"
			allow-clear
			@popupScroll="handlePopupScroll"
			@search="searchDataList"
		>
			<a-select-option v-for="item in dataList" :key="item.id" :label="item.mineMountainName" :value="item.id">
				{{ item.mineMountainName }}
			</a-select-option>
		</a-select>
	</a-card>
</template>

<script setup name="policyRuleManagement">
	import { ref, reactive, toRefs, onMounted, watch, computed, getCurrentInstance } from 'vue'
	import { message } from 'ant-design-vue'
	import constructionImplementation from '@/api/green/constructionImplementation'

	let mineName = ref('')
	let currentPage = 1
	let pageSize = 200
	let totalRecord = 0 // totalRecord
	let mineNameSearch = '' // 模糊查询
	const dataList = ref([])

	const toGetUnderlyingGreenMinePage = () => {
		constructionImplementation
			.getUnderlyingGreenMinePage({ current: currentPage, size: pageSize, mineMountainName: mineNameSearch })
			.then((res) => {
				dataList.value = dataList.value.concat(res.records)
				totalRecord = Number(res.total)
			})
	}

	const handlePopupScroll = (e) => {
		// 触底了就让页码page加1并判断是否小于总数，执行函数
		const { scrollHeight, scrollTop, clientHeight } = e.target
		if (scrollHeight - scrollTop === clientHeight) {
			if (currentPage * pageSize <= totalRecord) {
				currentPage = currentPage + 1
				toGetUnderlyingGreenMinePage()
			}
		}
	}

	let searchTumer = null
	const searchDataList = (e) => {
		// 防抖搜索
		if (searchTumer) {
			clearTimeout(searchTumer)
		}
		searchTumer = setTimeout(() => {
			mineNameSearch = e
			toGetUnderlyingGreenMinePage()
		}, 800)
	}

	onMounted(() => {
		toGetUnderlyingGreenMinePage()
	})
</script>
<style lang="less" scoped>
	.fristLine {
		display: flex;
		justify-content: space-between;
		margin-bottom: 28px;
		.tableInfo {
			display: flex;
		}
	}
</style>