使用Javascript实现VueJS中表格的下一步/上一步按钮

<template>
  <div>
    <table>
      <!-- 表格内容 -->
      <tr v-for="item in paginatedData" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.value }}</td>
      </tr>
    </table>
    <button @click="prevPage" :disabled="currentPage <= 1">上一步</button>
    <button @click="nextPage" :disabled="currentPage >= totalPages">下一步</button>
  </div>
</template>

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

export default {
  setup() {
    const data = ref([
      // 假设这是从后端获取的数据
      { id: 1, name: 'Item 1', value: 'Value 1' },
      // ...更多数据
    ]);
    const itemsPerPage = ref(10);
    const currentPage = ref(1);

    const totalPages = computed(() => Math.ceil(data.value.length / itemsPerPage.value));

    const paginatedData = computed(() => {
      const start = (currentPage.value - 1) * itemsPerPage.value;
      const end = start + itemsPerPage.value;
      return data.value.slice(start, end);
    });

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

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

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