Vue3封装指令：el-select滚动分页加载

下述代码只演示了 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>