elementplus 二次封装 select 自定义指令上拉加载更多完美解决多次接口调用重新加载数据多次调用！！！

news2025/1/8 3:41:40

ps: 我封装的 select 实现了：1、上拉加载更多。2、远程搜索。3、单选多选。4、二次回显之前选择的数据。5、option 里面显示的内容自定义

如果有您想要实现的功能可以私聊我

本文只讲解上拉触底加载更多

效果：（名字都是测试数据随便乱写的若有冒犯请联系）

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-tags
    reserve-keyword
    v-bind="$attrs"
    :teleported="true"
    filterable
    remote
    :remote-method="handleRemoteMethod"
    @visible-change="handleVisibleChange"
    @change="onSelectChange"
  >
    <el-option v-if="isShowAll" label="全部" value=""></el-option>
    <!-- :label="item.Name" -->
    <el-option
      v-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-select
            v-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的时候才会停止（以上只是推理没有验证）