全局指令-element-ui 下拉框无限下拉实现

准备好一个全局指令

import Vue from 'vue';
let MyPlugin = {};
// 定义全局指令
export default MyPlugin.install = function (vue, options) {
// loadmore 是定义的指令 名称 ， 使用时 用 v-loadmore = "dosomethingFun or data"
 Vue.directive('loadmore', {
	// bind只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
	bind(el, binding) {
 	 // 获取element-ui定义好的scroll盒子  Select 选择器的下拉盒子
  	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();
    	}
  	});
	},
 });
};

使用时如下：

<el-select
    v-model="personSelect"
    :disabled="hasAuth || !canSelectLawyer"
    :multiple="selectOption.multiple"
    :multiple-limit="multipleLimit"
    remote
    filterable
    placeholder="请选择律师"
    :remote-method="remoteMethod"
    class="selected-person"
    size="medium"
    v-loadmore="scrollLoad"
    infinite-scroll-immediate
    v-infinite-scroll="scrollLoad"
    @change="changeSelect"
    @focus="focusSelect"
    @blur="blurClear"
  >
    <el-option
      v-for="item in optionsPerson"
      :key="item.userId"
      :label="item.userName"
      :value="item.userId"
      class="infinite-list"
    >
      <span>{{ item.userName }}</span>
      <span v-if="item.userCode">({{ item.userCode }})</span>
    </el-option>
  </el-select>

	/**
  	* @description 滚动加载更多数据
 	* @author limei 2021/6/4
	 * */
scrollLoad() {
  // console.log('滚动加载！！！！！！！！！！！！！！！！！！！！');
  if (this.totalPage <= this.currentPage) {
    return false;
  }
  this.currentPage++;
  this.selectParams = {
    start: this.currentPage,
    limit: this.limitNum,
  };
  // 滚动查询
  this.getLawyerList();
},