下述代码只演示了 el-select 的滚动加载。其他属性 如 loading、remote、 filterable 等，若需要可自行添加
1、添加 el-select 的 poper-class 属性自定义l类名，用于定位元素（需与selectScroll.js文件中类名一致）
<el-select :popper-class="'my-select-scroll'"></el-select>
2、封装指令 selectScroll.js
/**
* 自定义指令：el-select 滚动加载
*/
// directives/selectScroll.js
import { nextTick } from 'vue';
export default {
mounted(el, binding) {
let debounceTimer = null;
// 定义一个函数来设置滚动监听器
const setupScrollListener = (dropdownEl) => {
if (!dropdownEl) return;
const handleScroll = async () => {
// 清除之前的定时器
if (debounceTimer) {
clearTimeout(debounceTimer);
}
// 设置新的定时器，等待用户停止滚动后再执行加载逻辑
debounceTimer = setTimeout(async () => {
// 当滚动到底部附近时
if (dropdownEl.scrollTop + dropdownEl.clientHeight >= dropdownEl.scrollHeight - 50) {
if (typeof binding.value === 'function') {
await binding.value();
}
}
// 清除定时器
debounceTimer = null;
}, 200); // 防抖延迟时间，单位为毫秒
};
// 绑定监听事件
dropdownEl.addEventListener('scroll', handleScroll);
// 将取消函数保存到 el 上，以便稍后可以移除监听器
dropdownEl._handleScroll = handleScroll;
};
// 监听 el-select 的打开事件以添加滚动监听器
if (el) {
// 此处绑定的是点击事件，若有其他情况，如focus事件，需自行处理
el.addEventListener('click', async () => {
// 确保下拉菜单已经渲染
await nextTick();
// 通过 自定义类名 找到目标元素
const mySelect = document.querySelector('.my-select-scroll');
if (mySelect) {
// 查找对应的下拉框元素
const dropdownEl = mySelect.querySelector('.el-select-dropdown__wrap');
// 绑定滚动监听器
setupScrollListener(dropdownEl);
}
});
}
// 移除滚动监听器的方法
const removeScrollListener = (dropdownEl) => {
if (dropdownEl && dropdownEl._handleScroll) {
dropdownEl.removeEventListener('scroll', dropdownEl._handleScroll);
delete dropdownEl._handleScroll;
}
};
// 确保在组件卸载时移除监听器
el._removeListeners = () => {
const dropdownEl = document.querySelector('.my-select-scroll .el-select-dropdown__wrap');
removeScrollListener(dropdownEl);
};
},
beforeUnmount(el) {
if (el._removeListeners) {
el._removeListeners();
delete el._removeListeners;
}
}
};
3、注册指令
import App from './App'
import selectScroll from './common/selectScroll'
const app = createApp(App)
// 注册下拉滚动指令
app.directive('selectScroll', selectScroll)
4、使用指令
<template>
<el-select
v-model="value"
:popper-class="'select-scroll'"
v-selectScroll="handleSelectScroll"
>
<el-option v-for="item in list" :key="item.value" :label="item.label" :value="item.value>
</el-option>
</el-select>
</template>
<script setup>
const params = ref({
pageNum: 1,
pageSize: 10,
})
const value = ref("")
const list = ref([])
// 下拉框加载更多
async function handleSelectScroll() {
/**
* 自行处理请求数据，需要注意的是此处 list.value 赋值要用 cancat 或者 push
*/
}
</script>
若存在多个下拉滚动加载的 el-select 时：
由于上述<2、封装指令>代码中的 dropdownEl 是通过自定义类名查找的，所以，当页面存在多个 el-selct 并且 :popper-class 相同时，上述方式只有第一个 el-select 功能正常，因此，需要动态设置 :popper-class，具体代码如下：
一、调整<封装指令>
1、添加工具代码：
// 获取目标元素
async function getElement(binding) {
// console.log('binding', binding.arg)
await nextTick()
// 通过 el-select 的 popper-class 属性自定义类名
let mySelect = document.querySelector(`.select-scroll`);
// console.log('mySelect', mySelect)
// 由于本示例传入的参数是索引，所以判断是否为0
if (binding.arg || binding.arg === 0) {
mySelect = document.querySelector(`.select-scroll-${binding.arg}`);
return mySelect?.querySelector('.el-select-dropdown__wrap');
} else {
return ""
}
}
2、替换部分代码：
el.addEventListener('click', async () => {
const dropdownEl = await getElement(binding);
// 绑定滚动监听器
if (dropdownEl) {
setupScrollListener(dropdownEl);
}
});
el._removeListeners = async () => {
const dropdownEl = await getElement(binding);
removeScrollListener(dropdownEl);
};
二、调整<使用指令>
此处演示 el-table-column 内嵌套 el-select 的情况，其他 v-for 循环出的结构原理一致
<template #default="scope>
<el-select
v-model="value"
:popper-class="`select-scroll-${scope.$index}`"
v-selectScroll:[scope.$index]="handleSelectScroll"
>
</el-select>
</template>
