el-select下拉滚动加载

先给大家看一下实现的效果 （带搜索）

效果

废话不多说直接上代码

html 代码

 <el-select v-el-select-loadmore="handleLoadmore" v-model="form.mmsi" placeholder="请输入船名" style="width: 100%" filterable remote reserve-keyword :loading="loadingShip" @change="getCurrentShip">
    <el-option v-for="item in shipList" :key="item.mmsi" :label="item.shipName" :value="item.mmsi"></el-option>
 </el-select>
 //这里主要是一个地方需要注意就是自定义指令这里下面我们会使用到就是
 // ** v-el-select-loadmore="handleLoadmore"

js 代码自定义指定 切记和data是同级的千万不要写错

  directives: {
    'el-select-loadmore': {
      bind(el, binding) {
        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();
          }
        });
      },
    },
  },
  data(){
    loadingShip:false,
    selectObj: {
        page: 1,
        size: 20,
        info: '',
    },
  },
  methods:{
   /**
   * 下拉加载
   */
    handleLoadmore() {
      let arr = []
      if (!this.loadingShip) {
        this.selectObj.page++;
        //接口请求的参数selectObj （getByInfo）
        getByInfo(this.selectObj).then(res => {
        arr = res.content;
        this.shipList = this.shipList.concat(arr)
      });
      }
    },
  }

接口的写法有很多种 这里我也给大家列出来 有利于新手的一个阅读

//后端需要的三个参数 查询的一个值info  page页数  size每页多少条
export function getByInfo(data) {
  return request({
    url: `url地址?info=${data.info}&page=${data.page}&size=${data.size}`,
    method: 'get',
  })
}
后面在使用的页面引入一下就可以正常调用了

其实整篇文章最重要的地方就是在自定义指令这一块，当然后完成需求的方法有很多，希望我这一种可以帮助到大家，这种也是本人亲测过，可行好理解的一种方式。