el-select自定义指令用于触底加载分页请求options数据（附上完整代码和接口可直接用）

问题描述

• 某些情况下，下拉框需要做触底加载

• ，发请求，获取option的数据
• 为了方便复用，笔者封装了一个自定义指令
• 另外也提供了一个简单的接口，用于演示
• 我们先看看效果图

效果图

思路分析

注意事项一 el-select要不嵌入到body中

• 为何，不嵌入到body标签中呢？
• 答曰，更加方便自定义指令管理，如下属性：
• <el-select :popper-append-to-body="false" ...
• 这样的话，我们可以在自定义指令的钩子中，可以直接使用el.querySelector(xxx)去选中下拉框的选项弹出层了。就不用使用document.querySelector(xxx)
• 因为，若是嵌入到body层，若是同一个页面，有多个el-select就不太好控制管理了
• 注意下方的两张图，option选项弹出层

不嵌入到body层

嵌入到body层

注意事项二 绑定和解绑事件句柄搭配debounce防抖的写法

• 注意，要按下以下的方式，进行语法书写
• 这是一种写法规范，因为，事件监听和解绑的句柄是一个整体

// 绑定事件，句柄handle函数，要是一个整体
dom.addEventListener('scroll', handle)

// 移除事件，句柄handle函数，也要对应是一个整体
dom.removeEventListener('scroll', handle)

// 定义一个句柄函数，为debounce套壳子的方式
import { debounce } from "lodash";
const handle = debounce((e) => {
    // xxxxxxxx
}, 170)

实现思路

• 首先给el-select添加:popper-append-to-body="false"属性，使其在内部管理，这样的话，在自定义指令中的钩子函数中，可以直接选中操作，获取到el-option滚动的容器

inserted(el, binding, vnode) {
    let scrollWrap = el.querySelector('.el-select-dropdown .el-scrollbar .el-select-dropdown__wrap')
}

• 然后，给滚动容器绑定监听事件，根据几个高度，判断是否触底（最好预留几个像素）
• 若是触底了，就触发外界传递的触底函数执行，这样的话，就是通知外界继续发请求，继续获取el-option数据
• 当然，这里的自定义指令，要传递一个函数（把函数当做参数传递进来，就是高阶函数的思想）
• 最后，别忘了，解绑事件即可

完整代码-自定义指令

import { debounce } from "lodash";

export default {
  inserted(el, binding) {
    // 获取滚动容器 DOM
    const scrollWrap = findScrollContainer(el);

    if (!scrollWrap) {
      console.warn('未找到下拉选择框的滚动容器');
      return;
    }

    // 防抖处理滚动事件
    const handle = debounce((e) => {
      const scrollDistance = scrollWrap.scrollHeight - scrollWrap.scrollTop;
      // 预留 6 像素的位置用于触底检测
      if (scrollWrap.clientHeight + 6 > scrollDistance) {
        binding.value(); // 触发外部传入的回调
      }
    }, 170);

    // 绑定滚动事件
    scrollWrap.addEventListener('scroll', handle);

    // 存储引用以便后续解绑
    el._scrollDirective = {
      scrollWrap,
      handle
    };
  },

  unbind(el) {
    // 检查指令是否有存储的引用
    if (el._scrollDirective) {
      const { scrollWrap, handle } = el._scrollDirective;

      // 移除事件监听器
      if (scrollWrap && typeof scrollWrap.removeEventListener === 'function') {
        scrollWrap.removeEventListener('scroll', handle);
      }

      // 清理存储的引用
      delete el._scrollDirective;
    }
  }
};

// 辅助函数：查找下拉选择框的滚动容器
function findScrollContainer(el) {
  // 尝试直接查找
  let scrollWrap = el.querySelector('.el-select-dropdown .el-scrollbar .el-select-dropdown__wrap');

  // 如果没找到，可能是下拉框还未渲染，尝试从 Vue 实例中获取
  if (!scrollWrap && el.__vue__ && el.__vue__.$refs.popper) {
    scrollWrap = el.__vue__.$refs.popper.querySelector('.el-scrollbar .el-select-dropdown__wrap');
  }

  return scrollWrap;
}

main.js引入

完整代码-给el-select使用这个自定义指令

<template>
  <div class="box">
    <el-select v-model="value" filterable :popper-append-to-body="false" v-load-more="loadmore" clearable>
      <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
      </el-option>
    </el-select>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      options: [],
      value: '',
      pageIndex: 1,
      pageSize: 20
    };
  },
  mounted() {
    this.getOptions()
  },
  methods: {
    async getOptions() {
      // 笔者自己的服务器，给大家提供了一个分页接口
      let url = `http://ashuai.work/api/pageData?pageIndex=${this.pageIndex}&pageSize=${this.pageSize}`
      let { data } = await axios.get(url)
      if (data.length == 0) return this.$message('没数据了')
      // 合并一下下拉框数据
      this.options = [
        ...this.options,
        ...data
      ]
    },
    // 触底了，继续发请求
    loadmore() {
      this.pageIndex = this.pageIndex + 1
      this.getOptions()
    },
  },
};
</script>