el-select加v-infinite实现数据懒加载和远程搜索功能

效果图：

v-infinite-scroll无限滚动组件使用详解

 1、v-infinite-scroll="load" //load无限滚动加载的方法
 2、infinite-scroll-disabled //是否禁用无限滚动加载
 3、infinite-scroll-delay //节流时延，单位为ms
 4、infinite-scroll-distance //触发加载的距离阈值，单位为px
 5、infinite-scroll-immediate //是否立即执行加载方法，以防初始状态下内容无法撑满容器。
 //默认情况下，infinite-scroll-disabled是false，因此如果组件使用无限滚动加载组件，即使在vue不进行加载方法的调用，组件也会调用该方法，因此如果需要控制的话，尽量是使用infinite-scroll-disabled属性来进行加载方法是否调用的控制。

使用：

<template>
  <div>
        <el-select
          placeholder="请选择/搜索学号或姓名"
          filterable
          @change="changeXs($event)"
          :filter-method="filterMethod"
          v-model="inputForm.xh"
          style="width: 50%; margin-right: 20px"
          v-if="isMounted"
        >
          <div v-infinite-scroll="load" infinite-scroll-delay="300" infinite-scroll-immediate="false" style="overflow: hidden"></div>
          <el-option v-for="(item, index) in xsList" :key="index" :label="item.xh" :value="item.xh">
            <span style="float: left">{{ item.xh }}</span>
            <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px">
              {{ item.xm }}
            </span>
          </el-option>
        </el-select>

        <el-input style="width: 50%" disabled v-model="inputForm.xm"></el-input>
  </div>
</template>

<script>
import xsqjService from "@/api/sys/xsqj/xsqjService";
export default {
  data() {
    return {
      isMounted: false,
      pageData: {
        // 懒加载相关参数，这里代表从第一条数据开始加载，一次加载十项
        current: 1,
        size: 10
      },
      total: 0,
      xsList: [],
      inputForm: {
        xh: "",
        xm: "",
       }
     }
   },
  mounted() {
    this.isMounted = true;
  },
  created() {
    this.getXs();
  },
  methods: {
   // 第一次进入页面获取数据列表
    async getXs() {
      const res = await xsqjService.getxslist({ ...this.pageData });
      this.xsList = res.records;
      this.total = res.total;
    },
   // 滑动加载数据
    async load() {
      if (this.pageData.current * this.pageData.size < this.total) {
        this.pageData.current++;
        const res = await xsqjService.getxslist({ ...this.pageData });
        this.xsList = this.xsList.concat(res.records);
      }
    },
  // 搜索清空列表，重置页码
    filterMethod(val) {
      this.xsList = [];
      this.pageData.current = 1;
      this.pageData.size = 10;
      if (val) {
        this.searchTimer && clearTimeout(this.searchTimer);
        this.searchTimer = setTimeout(async () => {
          const res = await xsqjService.getxslist({ ...this.pageData, xhOrXm: val });
          this.xsList = res.records;
        }, 500);
      } else {
        this.getXs();
      }
    },
    // 选择学号获取姓名
     changeXs(e) {
      this.inputForm.xm = this.xsList.find((ele) => ele.xh == e).xm;
    },
  }
}
</script>

参考：http://t.csdn.cn/wdekB