element-plus 下拉框下拉加载更多数据

1.select.vue

<el-select
v-model="searchParams.class_id"
placeholder="班级名称"
:clearable="true"
:filterable="true"
:filter-method="classesFilter"
v-load-more="loadClasses"
@change="classesChange"
@visible-change="classesVisibleChange"
>
  <el-option
  v-for="item in classesData"
  :key="item.class_id"
  :label="item.class_name"
  :value="item.class_id"
  />
</el-select>

const classesPage = ref(1);
const classes = ref();
const loadingClasses = ref(false);
const classesCount = ref(0);
const getClassesData = async() = > {
    loadingClasses.value = true;
    const query = {
        page: classesPage.value,
        page_size: 10,
        class_name: classes.value,
    };
    const {
        ok, data
    } = await classesApi.value(query, {
        'saas-slug': slug.value
    });
    if (ok) {
        classesCount.value = Math.ceil(data.count / 10);
        classesData.value = [...classesData.value, ...data.results];
    }
    loadingClasses.value = false;
};
const classesFilter = (val: string) = > {
    if (val) {
        searchParams.class_id = undefined;
        handleClasses(val);
    }
};
const classesVisibleChange = () = > {
    if (!searchParams.class_id && classes.value) {
        searchParams.class_id = classesData.value[0].class_id;
    }
};
const loadClasses = () = > {
    if (!loadingClasses.value && classesPage.value < classesCount.value) {
        classesPage.value++;
        getClassesData();
    }
};
const classesChange = (val: string) = > {
    if (!val) {
        handleClasses();
    }
};
const handleClasses = (val ? : string) = > {
    classes.value = val;
    classesPage.value = 1;
    classesData.value = [];
    getClassesData();
};

2.自定义指令v-load-more

export default function (app) {
  app.directive('load-more', {
    updated(el, binding) {
      const trigger = el.querySelector('.select-trigger');
      const id = trigger.getAttribute('aria-describedby');

      if (id) {
        const popper = document.getElementById(id);
        const SELECT_WRAP = popper.querySelector('.el-scrollbar .el-select-dropdown__wrap');

        // 这里不能使用箭头函数！
        SELECT_WRAP.addEventListener('scroll', function () {
          /**
           * scrollHeight 获取元素内容高度(只读)
           * scrollTop 获取或者设置元素的偏移值,
           *  常用于:计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
           * clientHeight 读取元素的可见高度(只读)
           * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
           * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
           */
          // 提前1个元素加载数据
          const CONDITION = this.scrollHeight - this.scrollTop - 34 < this.clientHeight;
          if (CONDITION) {
            binding.value();
          }
        });
      }
    },
  });
}

 参考链接：https://www.jianshu.com/p/35cca807031c