elementUi中select下拉框触底加载下一页

要实现下拉框触底加载下一页，可以使用 `element-ui` 的 `el-select` 和 `el-option` 组件结合 `scroll` 事件来实现。具体操作如下：

1. 在 `el-select` 组件中添加 `@scroll.native` 事件，绑定一个方法，用于监听下拉框的滚动事件。

2. 在绑定的方法中，判断下拉框是否滚动到底部，如果滚动到底部，则触发加载下一页的方法，并将下一页的数据添加到选项中。

3. 在 `el-option` 组件中添加一个指令 `v-if`，用于判断当前选项是否需要显示。当选项数据为空时，不显示该选项。

下面是一个示例代码：

<template>
  <el-select v-model="value" @scroll.native="handleScroll" :filterable="filterable">
    <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value" v-if="option.label !== 'loading'"></el-option>
    <el-option v-if="loading" label="loading">
      <template #loading>
        <i class="el-icon-loading"></i>
      </template>
    </el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      options: [],
      loading: false,
      filterable: true,
      page: 1,
    };
  },
  methods: {
    handleScroll(e) {
      const container = e.target;
      const scrollHeight = container.scrollHeight;
      const offsetHeight = container.offsetHeight;
      const scrollTop = container.scrollTop;
      if (scrollTop + offsetHeight >= scrollHeight && !this.loading) {
        this.loading = true;
        this.loadNextPage();
      }
    },
    async loadNextPage() {
      // 模拟异步加载数据
      await new Promise((resolve) => setTimeout(resolve, 1000));
      const nextPage = this.page + 1;
      const newOptions = Array.from({ length: 10 }, (_, index) => ({
        label: `Option ${nextPage}${index + 1}`,
        value: `option${nextPage}${index + 1}`,
      }));
      this.options = this.options.concat(newOptions);
      this.page = nextPage;
      this.loading = false;
    },
  },
};
</script>

这样，当下拉框滚动到底部时，就会触发加载下一页的方法，并将下一页的数据添加到选项中，从而实现了下拉框触底加载下一页的功能。