vue使用el-select无限加载数据，实现滚动加载，远程搜索

由于接口返回数据好几千条，所以使用滚动加载。

首先写vue 自定义指令：loadmore.js

// select下拉滚动加载//
const loadmore = {
  bind(el, binding) {
    const selectDom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
    // console.log("滚动加载>>>", selectDom)
    selectDom.addEventListener('scroll', function () {
      const height = this.scrollHeight - Math.ceil(this.scrollTop) <= (this.clientHeight+1)
      // if (height) {
      //   binding.value()
      // }
      if (height && this.scrollTop !== 0) {
        binding.value();
      }
    })
  }
}
export default loadmore

然后在页面使用自定义指令：

引入自定义指令：

import Vue from 'vue'
import selectLoadMore from '@/utils/loadmore.js'
const directives = {
  selectLoadMore
}
Object.keys(directives).forEach(name => Vue.directive(name, directives[name]))

使用： 

<el-col>
          <el-form-item label="选择发送人:" prop="sendUserEipsArray">
            <el-select 
              filterable 
              clearable 
              multiple 
              v-model="formData.sendUserEipsArray" 
              placeholder="请选择"
              @blur="query=''"
              v-selectLoadMore="()=>selectLoadMore()"
              @change="userChange"
              remote
              :remote-method="(query)=>remoteMethod(query,'remote')"
              loading-text="加载中"
              :loading="loading">
              <el-option
                v-for="item in sendUers"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

//请求接口：
async remoteMethod(query, type){
       // 远端搜索
      if (type == 'remote') {
        this.query = query || ''
        this.condition.pageNo = 1;
        this.condition.username=this.query
        this.total = 0;
        this.sendUers = []
      } else if (type == 'scroll') {
          // 滚动搜索
        // this.condition.username=this.query
      } else {
        // 初次加载
        this.condition={
          pageSize:20,
          pageNo: 1,
          realName: '',
          username: '',
          phone: '',
          roleId: '',
        },
        this.total = 0;
        this.sendUers = []
      }
      const res = await getAction(`接口地址`, {
        status: 1,
        ...this.condition
      })
      this.loading = true;
      if(res.data.success){
        this.loading = false;
        console.log('用户管理列表>>>',res.data.result)
        // 初次搜索和远端搜索，需要重置总数
        if (!type || type == 'remote') {
          this.total = res.data.result.total
        }
        let arr=[]
        arr=res.data.result.records.map(ele=>{
          return {
            value:ele.username,
            label:`${ele.realName}(${ele.username})`
          }
        })
        arr.forEach(ite=>{
          this.sendUers.push(ite)
        })
        // this.sendUers=arr
        console.log('options处理过的>>>',this.sendUers)
      } else {
        this.loading = false;
        this.$message.warning(res.data.message)
      }
      
    },

//方法：
// 滚动条-触底加载下一页
   selectLoadMore(){
      console.log("触底加载。。。。")
      // 如果超出最大页码，停止
      if (Math.ceil(this.total / this.condition.pageSize) == this.condition.pageNo) {
        return;
      }
      this.condition.pageNo += 1
      this.remoteMethod(this.query, 'scroll')
    },
mounted(){
this.remoteMethod()
}