使用Vuetify处理已分页的数据

<template>
  <v-container>
    <v-data-table
      :headers="headers"
      :items="paginatedData"
      :items-per-page="itemsPerPage"
      :page.sync="currentPage"
      @page-count="pageCount = $event"
    >
      <template v-slot:top>
        <v-pagination
          v-model="currentPage"
          :length="pageCount"
          :total-visible="7"
        ></v-pagination>
      </template>
    </v-data-table>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        { text: 'ID', value: 'id' },
        { text: 'Name', value: 'name' },
        { text: 'Age', value: 'age' },
      ],
      data: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 },
        // ... more data
      ],
      currentPage: 1,
      itemsPerPage: 10,
      pageCount: 0,
    };
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.data.slice(start, end);
    },
  },
};
</script>