element-ui select 下拉框做成下拉加载更多

本文主要是介绍element-ui select 下拉框做成下拉加载更多，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

注意： vue 版本需要 ≥ 3.3

1、html

<el-selectv-model="relation_type"placeholder="请选择合作类型"ref="select"
><el-optionv-for="item in cooperationTypeList":key="item.value":label="item.label":value="item.value"/>
</el-select>

2、主文件

import { useElSelectionInfinityScroll } from '@/utils/combinationFunc';
setup(props, context) {const data = reactive({noMore: false,loading: false,cooperationTypeList: []});const { proxy } = getCurrentInstance();const loadMore = () => {if (data.loading) return;data.loading = true;if (proxy.cooperationTypeList.length > 40) {// 获取到最后的值时，不再监听滚动条的动作，移除滚动事件data.noMore = true;}proxy.cooperationTypeList.push(...proxy.cooperationTypeList);data.loading = false;};onMounted(() => {const elem = proxy.$refs.select.$refs.scrollbar.$refs.wrap;useElSelectionInfinityScroll(elem, loadMore, () => data.noMore);});
}

自行补充接口调用相关方法

3、 @/utils/combinationFunc.js

import { onUnmounted, toValue, watchEffect } from 'vue';
import { Throttle } from '@/utils/debunce';export function useElSelectionInfinityScroll(target, callback, noMore) {onUnmounted(() => target.removeEventListener('scroll', Throttle(scolling, 300)));const scolling = () => {if (toValue(noMore)) return;const canLoadMore = target.scrollHeight - target.scrollTop <= target.clientHeight;if (canLoadMore) {callback();}};watchEffect(() => { scolling(); });target.addEventListener('scroll', scolling);
}