vue elementui的select组件实现滑到底部分页请求后端接口

在Vue中使用Element UI的Select组件时，可以通过监听滚动事件来判断用户是否滑动到了列表的底部。如果是，可以触发一个方法去请求后端接口。

以下是一个简单的例子：

<template>
  <el-select
    v-model="value"
    multiple
    placeholder="请选择"
    :popper-append-to-body="false"
    @scroll.native="handleScroll"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    ></el-option>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      value: [],
      options: [],
      loadingMore: false,
    };
  },
  methods: {
    fetchData() {
      // 假设这是一个API请求
      this.loadingMore = true;
      setTimeout(() => {
        const moreData = [{ label: '更多选项', value: 'more' }];
        this.options = [...this.options, ...moreData];
        this.loadingMore = false;
      }, 1000);
    },
    handleScroll(event) {
      const target = event.target;
      if (target.scrollHeight - target.scrollTop <= target.clientHeight && !this.loadingMore) {
        this.fetchData();
      }
    },
  },
  mounted() {
    this.fetchData(); // 初始加载数据
  },
};
</script>

在这个例子中，handleScroll 方法会在滚动 el-select 的原生滚动事件触发时被调用。当滚动条距离底部一定距离时（可以通过计算 target.scrollHeight - target.scrollTop <= target.clientHeight 来判断），会触发 fetchData 方法，从而请求后端接口获取更多数据。loadingMore 变量用于防止在数据加载过程中重复触发请求。