elementui select下拉框-滚动到底部加载更多

在Element UI的Select组件中，如果需要实现滚动到底部加载更多的功能，可以通过监听下拉框的滚动事件来实现。以下是一个简单的实现示例：

<template>
  <el-select
    v-model="value"
    multiple
    placeholder="请选择"
    :loading="loading"
    @scroll="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: [],
      loading: false,
      page: 1,
      pageSize: 10,
    };
  },
  methods: {
    fetchOptions() {
      this.loading = true;
      // 模拟异步加载数据
      setTimeout(() => {
        for (let i = 0; i < this.pageSize; i++) {
          this.options.push({
            value: `option${(this.page - 1) * this.pageSize + i}`,
            label: `Option ${(this.page - 1) * this.pageSize + i}`,
          });
        }
        this.loading = false;
        this.page++;
      }, 1000);
    },
    handleScroll(event) {
      const target = event.target;
      if (target.scrollHeight - target.scrollTop <= target.clientHeight) {
        this.fetchOptions();
      }
    },
  },
  mounted() {
    this.fetchOptions();
  },
};
</script>

在这个示例中，我们定义了一个handleScroll方法，该方法会在下拉框滚动时被调用。当下拉框的滚动条到达底部时，即target.scrollHeight - target.scrollTop <= target.clientHeight时，会触发fetchOptions方法，从而加载更多的选项。

请注意，这个示例使用了setTimeout来模拟异步加载数据的过程，实际应用中你需要替换为真实的数据加载逻辑。此外，根据你的实际需求，可能还需要添加一些额外的条件判断，例如检查是否已经加载了所有数据，避免无限滚动加载。