elementUI select远程搜索分页，实现滚动条下拉分页

template

<el-select
  v-model="form.userCode"
  v-el-select-loadmore="loadmore"
  filterable
  remote
  reserve-keyword
  :remote-method="userRemoteMethod"
  :loading="personLoading"
>
  <el-option
    v-for="item in personOptions"
    :key="item.userCode"
    :label="item.phonenumber"
    :value="item.userCode"
  />
</el-select>

methods

// 远程搜索
userRemoteMethod(query) {
  if (query !== '') {
    this.personLoading = true;
    this.queryParams.phonenumber = query;
    this.queryParams.pageNum = 1;
    this.personOptions = [];
    this.getUserList();
  } else {
    this.personOptions = [];
  }
},
// 调用接口查询数据
getUserList() {
  listAllUser(this.queryParams).then(response => {
    this.personLoading = false;
    this.personOptions = [...this.personOptions, ...response.rows];
  });
},
// 远程搜索列表触底事件
loadmore() {
  this.queryParams.pageNum++;
  this.getUserList();
},

main.js

import elementDirective from './directive';
Vue.use(elementDirective);

directive.js

import elSelectLoadmore from './elSelectLoadmore';
const install = function(Vue) {
  Vue.directive('el-select-loadmore', elSelectLoadmore);
};
export default install;

elSelectLoadmore.js

export default {
  inserted(el, binding, vnode) {
    const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
    SELECTWRAP_DOM.addEventListener('scroll', function() {
      const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
      if (condition) {
        binding.value();
      }
    });
  }
};