Vuetify:在我的v-data-table顶部和页脚显示分页控件

<template>
  <div>
    <v-data-table
      :headers="headers"
      :items="items"
      :items-per-page="perPage"
      :page.sync="currentPage"
      :footer-props="{
        'items-per-page-options': [5, 10, 20],
        'show-current-page': true,
        'show-first-last-page': true
      }"
    ></v-data-table>
    <v-pagination
      v-model="currentPage"
      :length="Math.ceil(items.length / perPage)"
      :total-visible="7"
    ></v-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        { text: 'Name', value: 'name' },
        { text: 'Age', value: 'age' },
        { text: 'Email', value: 'email' }
      ],
      items: [
        { name: 'John Doe', age: 30, email: 'john.doe@example.com' },
        { name: 'Jane Smith', age: 25, email: 'jane.smith@example.com' },
        // more items...
      ],
      perPage: 5,
      currentPage: 1
    };
  }
};
</script>