如何在v-data-table中查看分页指示

<template>
  <v-data-table
    :headers="headers"
    :items="items"
    :pagination="true"
    :rows-per-page-items="[10, 20, 50]"
  >
    <template v-slot:footer>
      <v-pagination
        v-model="page"
        :length="totalPages"
        :total-visible="7"
        @input="updateData"
      ></v-pagination>
    </template>
  </v-data-table>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        // 表头配置
      ],
      items: [
        // 数据源
      ],
      page: 1,
      pageSize: 10,
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.items.length / this.pageSize);
    },
  },
  methods: {
    updateData() {
      // 更新数据源，根据当前页数和每页行数进行切片
      const startIndex = (this.page - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      this.items = this.items.slice(startIndex, endIndex);
    },
  },
};
</script>