vue3+element plus实现下拉滚动无限加载，js版本

vue3中在element-plus的el-select使用v-infinite-scroll实现下拉选项滚动加载遇到的问题

公司项目中有下拉框选择版本号，但是数据量会很大，需要用到滚动加载，然而使用的技术栈属实尴尬，毕竟也没什么人用vue3+js的，所以没法抄作业只好自己实现。

首先，在el-select中使用v-infinite-scroll会遇到一个报错，如下；

Uncaught (in promise) TypeError: Cannot destructure property 'containerEl' of 'el[SCOPE]' as it is undefined.

这里的错误产生原因是官方上的Issues解释是需要nextTick()之后再去显示
解决方法是组件挂载完成再去显示el-select组件

<el-select
   v-model="form.region"
   style="margin-right: 20px"
   v-if="isMounted"
>
  <div
    v-infinite-scroll="load"
    infinite-scroll-immediate="false"
    style="overflow: hidden"
   ></div>
   <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value"
    />
</el-select>

const isMounted = ref(false);
onMounted(() => {
  isMounted.value = true;
 });

还有就是需要在使用v-infinite-scroll的元素设置overflow: hidden以及固定高度，不然可能会出现下拉重复加载的问题。之后就是load方法

 const load = debounce(() => {
 //异步获取数据函数，这里的debounce是我自己封装的防抖函数，不然会有下拉一次请求两次的问题。
   getVersNum()
 });

大致就是这样了，做个记录其中的报错解决问题是掘金上的一位大哥的方法，原文地https://juejin.cn/post/7095925947412512804，就是这样。