el-select滚动底部加载更多-Vue3（ElementPlus版，亲测成功）

        最近线上环境发现一个问题，在进入页面后3s后页面即卡顿崩溃，刷新页面无效，内存剧增，经排查，是由于某一个选择框的数据由于接口一次性返回数据过多，导致浏览器处理不了，随即出现这个问题。

有几种解决方案： 

1、接口增加分页，选择框滚动到底部加载下一页。

优点：数据过多万能解决方案。

缺点：前端需做处理，且本人在实现当中发现跟以前element不太不一样，特作此文章日志

2、前端分次查询，多次调用接口。

优点：简单便携

缺点：多次调用接口，且数据量不可控，一次加载的数据长度不好把控，增加服务器压力

3、后端优化接口一次性返回大数据时耗时问题，前端采用虚拟列表的方式展示。

优点：在处理数据量大且页面不能卡顿的需求下，这个方案是好的

缺点：前后端都需要作处理，比较麻烦且给双方都增加不小的工作量（影响摸鱼时间）

当前则采用第一种方案，并写成自定义指令其他需要的地方复用

这里有个问题需要注意一下

由于ElementPlus增加了一个teleported属性且默认为true，使下拉菜单默认插入到body元素下，所也就是el-select下默认不包含.el-select-dropdown了，所以可以添加一个popper-class，详见代码。

业务组件 xxxx.vue

/**
 * 重点需要加上
 * v-select-loadmore="onLoadmore"
 * popper-class="single-select-loadmore"
*/
<template>
    <el-select 
        ref="select_loadmore"
        v-model="formModel.test"
        v-select-loadmore="onLoadmore"
        filterable
        remote
        popper-class="single-select-loadmore"
        :remote-method="(query: string) => console.log('输入的内容')}"
    >
        <el-option 
            v-for="item in selectOption
            :key="item.id"
            :label="item.label"
            :value="item.value"
        ></el-option>
    </el-select>
</template>
<script lang="ts" setup>
const onLoadmore = () => {
	console.log('滚动到底部');
    // 这里就可以开始处理分页逻辑了
};
</script>

自定义指令文件 - elSelectLoadMore.ts

export default {
	beforeMount(el: any, binding: DirectiveBinding) {
        /** 
         * 这里以前取样式名是
         * el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
         * 之后.el-select-dropdown__wrap 不在它下面了，single-select-loadmore            
         * 为自定义的class
        */
		const selectDom = document.querySelector('.single-select-loadmore .el-select-dropdown__wrap');
		function loadMores() {
            // 判断是否到底
			const isBase = this.scrollHeight - this.scrollTop <= this.clientHeight;
			if (isBase) {
                // 可以增加防抖，用户体验会更好，视情况而定
				binding.value && binding.value();
			}
		}
        // 将获取到的dom和函数挂载到el-select上，实例销毁时好处理
		el.selectDomInfo = selectDom;
		el.selectLoadMore = loadMores;
        // 监听滚动事件
		selectDom?.addEventListener('scroll', loadMores.bind(selectDom));
	},
    // 实例销毁
	beforeUnmount(el: any) {
		if (el.selectLoadMore) {
			el.selectDomInfo.removeEventListener('scroll', el.selectLoadMore);
			delete el.selectDomInfo;
			delete el.selectLoadMore;
		}
	},
};

自定义指令统一注册 - index.ts

import elSelectLoadmore from './elSelectLoadMore.ts';

export default function directive(app: any) {
	app.directive('selectLoadmore', elSelectLoadmore);
}

最后面在main.ts中调用directive函数完成指令注册

import { createApp } from 'vue';
// 入口文件
import App from '@/App.vue';
// 自定义指令
import directive from './directive';
// 创建app
const app = createApp(App);
directive(app);