Vue3+ElementPlus的el-select滚动分页解决方案

做一个自定义指令文件，elementplus中下拉框不再是对应组件内部了，针对一个页面多个滚动的情况，将class类也做成变量

里面的代码，接口部分自己改改

export const selectLoadMore = {
  beforeMount (el, binding) {
    const selectDom = document.querySelector(
      `.${binding.arg} .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) {
    if (el.selectLoadMore) {
      el.selectDomInfo.removeEventListener("scroll", el.selectLoadMore);
      delete el.selectDomInfo;
      delete el.selectLoadMore;
    }
  }
};

<template>
    <el-col :span="8">
        <el-form-item label="创建人：">
                <el-select v-model="optionObj.form.creator" clearable placeholder="请选择" 
                v-select-loadmore:[loadmoreClass]="onLoadmore"
                :popper-class="loadmoreClass"
                filterable remote :remote-method="userSearch" @visible-change="handleDropdownVisibleChange">
                    <el-option
                    v-for="item in userList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                    />
                </el-select>
        </el-form-item>
    </el-col>
</template>

<script setup>
const userList = ref([]);
const obj = reactive({
    page: 1,
    size: 10,
    search: '',
    status: 1
});
const loadmoreClass = ref('single-select-loadmore');
const getUsers = () => {
    getUser(obj).then((res) => {
        res.records.map(item => {
            userList.value.push(item);
        });
    })
    .catch(() => {});
};
const userSearch = (e) => {
    if (e) {
        obj.search = e;
        userList.value = [];
        obj.page = 1;
        getUsers();
    }
};
const handleDropdownVisibleChange = (open) => {
    if (!open) {
        userList.value = [];
        obj.page = 1;
        obj.search = '';
    }
    else getUsers();
};
// 下拉框滚动
const onLoadmore = () => {
    obj.page++;
    getUsers();
    console.log('到底部了');
};
</script>

import { selectLoadMore } from '@/directives';
app.directive('selectLoadmore', selectLoadMore);