【vue3】element-plus下拉选择使用无限滚动实现下拉加载

template部分

<el-select
    v-if="isMounted"
    v-model="XXX"
    placeholder="请选择"
>
    <div
        v-infinite-scroll="loadMore"
        style="overflow: hidden;"
    >
        <el-option
            v-for="item in List"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
    </div>
</el-select>

 注意：style="overflow: hidden;" 很重要，它会防止下拉框显示时直接触发无限滚动触底事件；isMounted防止出现‘Unhandled error during execution of directive hook’警告

js部分

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

// 下拉加载方法 debounce为防抖函数 
const loadMore = debounce(() => {
  if (page >= totlePage) return;
  page++;
  getList();
}, 200);

注意：在此之前应调用getLIst()方法，对下拉数据进行初始化，否则初始数据为空