写一个vue+element selected下拉框虚拟列表

<template>
<div class="virtual-select">
<el-select
v-model="selected"
placeholder="请选择"
v-on:popper-show="initScroll"
v-on:popper-hide="clearScroll"
>
<el-option
v-for="(item, index) in options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
</template>

<script>
export default {
data() {
return {
selected: '',
options: [],
start: 0,
end: 20,
}
},
methods: {
initScroll() {
this.$refs.popper.addEventListener('scroll', this.handleScroll)
this.updateOptions()
},
clearScroll() {
this.$refs.popper.removeEventListener('scroll', this.handleScroll)
},
handleScroll(event) {
const scrollTop = event.target.scrollTop
const scrollHeight = event.target.scrollHeight
const clientHeight = event.target.clientHeight

if (scrollTop === 0) {
this.start = 0
this.end = 20
this.updateOptions()
} else if (scrollHeight - scrollTop === clientHeight) {
this.start += 20
this.end += 20
this.updateOptions()
}
},
updateOptions() {
const data = Array.from({ length: 1000 }, (_, index) => ({
label: `Option ${index}`,
value: index,
}))
this.options = data.slice(this.start, this.end)
},
},
}
</script>

<style>
.virtual-select .el-select-dropdown .el-scrollbar__wrap {
height: 200px;
}
</style>