<el-select>--搜索、滚动加载 (分页接口)

<template>
  <div>
    <el-select
      remote
      clearable
      filterable
      reserve-keyword
      v-model="data"
      placeholder="请输入...."
      :remote-method="search"
      @visible-change="visibleChange"
    >
      <div ref="scrollbar" class="scrollbar" @scroll="handleScroll">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
        <div class="more">
          <div v-if="!moreShow" class="more_btn" v-loading="moreLoading"></div>
          <div v-if="moreShow" class="no_more">没有更多数据...</div>
        </div>
      </div>
    </el-select>
  </div>
</template>
<script>
export default {
  props: {},
  data() {
    return {
      // 下拉框数据
      options: [],
      // 加载
      moreLoading: false,
      // 加载提示文字
      moreShow: false,
      // 搜索
      searchName: "",
      // 下拉选中的值
      data:"",
      // 分页
      pageData: {
        current: 1,
        size: 10,
        total: 0,
      },
    };
  },
  methods: {
    // select-搜索
    search(val) {
      this.searchName = val;
      this.pageData.current = 1;
      this.options = [];
      this.getData();
    },
    // select-下拉
    visibleChange(val) {
      if (val) {
        this.searchName = "";
        this.pageData.current = 1;
        this.options = [];
        this.getData();
      }
    },
    // select-滚动
    handleScroll() {
      // 判断如果没有数据了则不在触发
      if (!this.moreShow) {
        // 计算滚动时是否到达底部
        const scrollbar = this.$refs.scrollbar;
        const height = Math.ceil(scrollbar.scrollTop + scrollbar.clientHeight);

        if (scrollbar.scrollHeight == height) {
          console.log("滚动条到达底部");
          this.moreLoading = true;
          // 分页-当前页数+1，再次请求
          this.pageData.current = this.pageData.current + 1;
          this.getData();
        }
      }
    },
    //获取数据
    getData() {
       getDataApi(
         this.pageData.current,
         this.pageData.size,
         this.searchName
       ).then(({ data }) => {
         const res = data.data;
         
         //判断获取时有没有数据，没有则标记moreShow一下
         if (res.records.length == 0) {
           console.log("没有数据");
           this.moreShow = true;
         }

         (res.records || []).forEach((item) => {
           this.hunterOptions.push({
             label: item.name,
             value: item.id,
           });
         });
       });
       this.moreLoading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.scrollbar {
  max-height: 230px;
  overflow-y: auto;
}
.more {
  .more_btn {
    height: 20px;
  }
  .no_more {
    text-align: center;
  }
}
</style>