Vue基于分页ajax的select

<template>
  <div>
    <select v-model="selected">
      <option v-for="item in paginatedData" :key="item.id" :value="item.value">
        {{ item.text }}
      </option>
    </select>
    <button @click="prevPage" :disabled="currentPage <= 1">Previous</button>
    <button @click="nextPage" :disabled="currentPage >= totalPages">Next</button>
  </div>
</template>

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

export default {
  setup() {
    const data = ref([]); // 假设这是从Ajax请求获取的数据
    const selected = ref('');
    const currentPage = ref(1);
    const pageSize = ref(10);

    // 模拟Ajax请求
    function fetchData() {
      // 这里应该是Ajax请求代码，例如使用fetch API
      // fetch('your-api-endpoint?page=' + currentPage.value + '&size=' + pageSize.value)
      //   .then(response => response.json())
      //   .then(json => {
      //     data.value = json;
      //   });
    }

    const totalPages = computed(() => Math.ceil(data.value.length / pageSize.value));
    const paginatedData = computed(() => {
      const start = (currentPage.value - 1) * pageSize.value;
      const end = start + pageSize.value;
      return data.value.slice(start, end);
    });

    function prevPage() {
      if (currentPage.value > 1) {
        currentPage.value--;
      }
    }

    function nextPage() {
      if (currentPage.value < totalPages.value) {
        currentPage.value++;
      }
    }

    // 初始化数据
    fetchData();

    return {
      selected,
      paginatedData,
      currentPage,
      totalPages,
      prevPage,
      nextPage
    };
  }
};
</script>