vue3 el-select 分页加载

在Vue3中，`el-select` 是 Element UI 提供的一个下拉选择组件，而分页加载通常用于数据量较大的情况，需要通过多次请求来获取并显示数据的部分。为了实现在 `el-select` 中的分页加载功能，你可以按照以下步骤操作：

1. **设置分页数据源**: 将你的数据源设计成一个可以按页切分的对象，例如一个数组的slice，每一页包含固定数量的数据。

data() {
  return {
    options: [], // 假设这是原始选项列表
    currentPage: 1,
    pageSize: 10, // 每页显示的数量
    isLoading: false, // 加载状态标记
    loadingData: [] // 当前正在加载的数据
  };
},

2. **处理分页请求**: 当用户改变页数或者滚动到底部时，触发一个请求去获取新的数据页。

methods: {
  loadMore() {
    this.isLoading = true;
    setTimeout(() => { // 使用模拟的异步请求
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      const slicedOptions = this.options.slice(start, end); // 获取当前页数据

      this.loadingData = slicedOptions; // 显示加载中的数据
      this.isLoading = false; // 设置加载完成
      if (end >= this.options.length) {
        this.loadMoreDisabled = true; // 如果所有数据都加载完，禁用loadMore按钮
      }
    }, 1000);
  }
}

3. **绑定 `v-model` 和监听变化**: 用 `v-model` 绑定到 `el-select` 的值，并监听 `input` 事件来触发 `loadMore` 函数。

<template>
  <el-select v-model="selectedOption" @input="loadMore">
    <el-option
      v-for="(option, index) in loadingData"
      :key="index"
      :label="option.label"
      :value="option.value"
    ></el-option>
    <!-- 添加一个加载更多项 -->
    <el-option
      v-if="isLoading || !options.length"
      label="加载更多..."
      disabled
    ></el-option>
  </el-select>
</template>

4. **控制加载更多按钮**: 可能还需要添加一个标志变量 `loadMoreDisabled` 来控制“加载更多”按钮是否可用。

注意，在实际应用中，你需要将上述示例中的 `setTimeout` 替换为你实际的 API 请求，比如 axios 或者Vuex的action等。