vue3下拉框分页加载

Vue3下的分页加载通常会应用在下拉框组件中，当数据量较大时，为了提高用户体验，我们会采用懒加载策略，也就是在用户滚动到下一页内容时再请求新的数据。这需要结合Vuex或自定义事件来进行状态管理。

以下是一个简单的步骤描述：

1. **模板部分**：在HTML模板中，创建一个下拉框，并添加滚动监听事件，比如`v-on:scroll="loadMore"`，触发加载更多数据的函数。

<template>
  <div v-loading="isLoading" ref="dropdown">
    <select @scroll="loadMore">
      <!-- 数据项动态生成 -->
      <option v-for="(item, index) in paginatedData" :key="index">{{ item }}</option>
    </select>
  </div>
</template>

2. **脚本部分**：定义`paginatedData`，初始化时只加载一部分数据，并设置`isLoading`标志用于显示加载状态。`loadMore`函数会检查是否达到加载限制，如果可以，发送请求获取新数据并更新状态。

<script setup>
import { ref, onMounted } from 'vue';

const dataList = ref([]);
const isLoading = ref(false);
let currentPage = 1;

onMounted(() => {
  // 初始加载数据
  loadData(currentPage);
});

function loadMore() {
  if (/* 判断是否还有更多数据 */) {
    isLoading.value = true;
    // 发送请求，参数包括当前页数
    fetchData({ page: currentPage++ }).then((newData) => {
      dataList.value = [...dataList.value, ...newData];
      isLoading.value = false;
    });
  }
}
</script>

3. **API接口**：假设有一个`fetchData`函数，它会根据传入的参数向服务器请求新的数据页。

// 假设这是一个mock API
async function fetchData(options) {
  const response = await fetch(`/api/data?page=${options.page}`);
  return await response.json();
}