elementplus 二次封装 select 自定义指令上拉加载更多 完美解决 多次接口调用 重新加载数据多次调用数据！！！
效果：（名字都是测试数据 随便乱写的 若有冒犯 请联系）
select 二次封装
网上的这种自定义指令上拉加载更多的实例有很多，但是基本都是有缺陷和问题的。为了记录这个问题 我研究了一天，在今天终于搞定了 呜呜呜。
网上遇到的问题：
1、封装的自定义指令没法用（后续会讲解原理）
2、封装完 select 之后 如果一个页面有多个封装的 select 会导致多次触发加载更多。比如一个页面有3个 select 其中一个触发了加载更多 则其他两个也会同时触发(如果是调接口则会触发三次)（后续会讲解原理）
3、当上拉触底多次（比如调用接口可能是 pageindex:1, pageindex:2, pageindex:3 获取三次的数据），这个时候点击其他区域 将 option 隐藏起来 这时候重新点击 select 会重新触发三次的接口请求。（后续会讲解原理）
开始二次封装 selec 组件(只写重点代码其他自己参考)
"element-plus": "^2.8.0",
"vue": "^3.2.47",1、子组件
1、components/el-load-search-select/index.vue
<template><!-- :popper-class-name 和 :popper-class 和 v-loadmore 为这里的重点！！！！--><el-select:popper-class-name="popperClassName"v-model="selectedValue"v-loadmore="handleLoadMore"placeholder="请选择":popper-class="popperClassName":multiple="!isOnlySingle"collapse-tagsreserve-keywordv-bind="$attrs":teleported="true"filterableremote:remote-method="handleRemoteMethod"@visible-change="handleVisibleChange"@change="onSelectChange"><el-option v-if="isShowAll" label="全部" value=""></el-option><!-- :label="item.Name" --><el-optionv-for="item in baseSelectUserList":key="item.Id":label="item.Name":value="item[keyName]"><span style="float: left">{{ item.Name }}</span><span style="float: right; color: #8492a6; font-size: 13px">{{onShowLabel(item)}}</span></el-option></el-select>
</template>
<script setup lang="ts">const props = defineProps({/** 双向绑定 */modelValue: {type: [String, Array as () => Array<string>],default: null,},/** 机构参数 */orgIds: {type: [String, Array as () => Array<string>],default: "",},/** 科室参数 */deptIds: {type: [String, Array as () => Array<string>],default: "",},/** 角色 */roleTypes: {type: [String, Array as () => Array<string>],default: "",},/** 是否获取权限内的数据 */scopeable: {type: Boolean,default: false,},/** 是否是通过redash */isRedash: {type: Boolean,default: false,},/** 选择的是否是单选 */isOnlySingle: {type: Boolean,default: true,},/** 双向绑定的值是哪个字段 */keyName: {type: String,default: "Id",},/** 关键字搜索默认数据 */remoteName: {type: String,default: "",},/** dtoType */dtoTypeName: {type: String,default: "QueryUserOutputDto3",},/** 下拉列表显示什么数据 */selectShowLabel: {type: String,default: "",},/** 是否显示全部选择 */isShowAll: {type: Boolean,default: true,},/** 是否显示默认列表数据（主要是做回显操作） */isUseDefaultList: {type: Boolean,default: false,},/** 一个页面多次使用 select popperClassName不能重复 切记！！！！！！ */popperClassName: {require: true,type: String,},
});
</script>
2、父组件
<el-load-search-selectv-model="transferAssistant.oldPhone"placeholder="请选择医助":role-types="['doctor']":scopeable="false":is-redash="false":is-only-single="true"key-name="PhoneNumber"popper-class-name="oldAssistant" // 这里是重点style="width: 140px;"/>3、自定义指令
src/directive/elSelectLoadMore.ts
import { debounce, DebouncedFunc } from "lodash";
export default {mounted(el: any, binding: { value: () => void; },vnode:any) {console.log('el', el)// 这里的popper-class-name就是使用 select 时候传递的 popper-class-name="oldAssistant" ！！！！！const popperClassName = el.getAttribute('popper-class-name')console.log('popperClassName', popperClassName);let scrollWrap = document.querySelector(`.${popperClassName} .el-select-dropdown__wrap`)!// let scrollWrap = document.querySelector('.selectPopperClass .el-select-dropdown__wrap')!// 把监听的方法防抖一下const handle = debounce((e) => {console.log('scrollWrap.scrollTop', scrollWrap.scrollTop);console.log('scrollWrap.scrollHeight', scrollWrap.scrollHeight);console.log('scrollWrap.clientHeight', scrollWrap.clientHeight);let scrollDistance = scrollWrap.scrollHeight - scrollWrap.scrollTop// 比如此处预留10个像素的位置用于触底if (scrollWrap.clientHeight + 10 > scrollDistance) {binding.value() // 触底通知一下，外界}}, 170)// 绑定监听滚动事件scrollWrap?.addEventListener('scroll', handle)// 方法挂载到元素身上便于解绑时使用el._hanlde = handle},unmounted(el: { _hanlde: EventListenerOrEventListenerObject | null; }, binding: any) {let scrollWrap: any = document.querySelector('.el-scrollbar__wrap')console.log('scrollWrap', scrollWrap)scrollWrap?.removeEventListener('scroll', el._hanlde)el._hanlde = null}
}src/directive/index.ts
import loadmore from "./elSelectLoadMore";
// 自定义指令对象，用于遍历注册
const directives = {loadmore,
} as any;
// 批量注册指令并暴露到main.js中去便于注册
export default {install(app: { directive: (arg0: string, arg1: any) => void }) {Object.keys(directives).forEach((key) => {app.directive(key, directives[key]);});},
};
src/mian.ts
import directive from './directive';
app.use(directive);上面是所有的代码，接下来讲解上面的三个问题
三个问题的讲解
1、 封装的自定义指令没法用
原因出在let scrollWrap = document.querySelector()! 时候里面写的 class 实际在 dom 中不存在
在 elementplus 时候 select 进行了重构 element 的封装不适合了
2、封装完 select 之后 如果一个页面有多个封装的 select 会导致多次触发加载更多
这里的 select 是在 body 上面的 里面的 class 名称都是一样的 如果你 let scrollWrap = document.querySelector()!里面写的 class 名称是一样的话 就是导致这个问题
因为你每一个都是相同的 class 都回触发自定义指令
而我这边是自己传入了一个自定义属性(上面框起来 有 oldAssistant 和 newAssistant) 通过querySelector(自定义属性)! 那就每一个select不一样了
所以为什么我很强调popper-class-name="" 使用组件的这个属性为什么一定要不一样
3、点击其他区域 将 option 隐藏起来 这时候重新点击 select 会重新触发多次请求
在之前可能你请求了三次 数据可能有100条 假设每一条高度是20px 这时候你的整体高度就是2000px 这个时候你重新点击 select 又去加载数据（远程搜索 空字符串）可能只有30条 这个时候高度就是600px 那么之前的滚动条是在最底部的 elementplus 记录了你上一次的位置 这次你的高度只有600px 完全没有到达之前的高度 就会导致一直触发上拉触底 一直等到你的高度>=2000px的时候才会停止（以上只是推理 没有验证）