如何获取v-data-table当前页码和每页条数计算行序号

解决方案 #

你可以通过双向绑定v-data-table的分页属性直接获取当前页码和每页条目数，两种主流Vuetify版本的实现方式如下：

1. 定义响应式变量 #

先在组件中声明两个变量存储分页状态：

// Vue2 + Vuetify2 示例
export default {
  data() {
    return {
      currentPage: 1, // 存储当前页码，默认第一页
      itemsPerPage: 50, // 存储每页显示条数，和你设置的默认值保持一致
      headers: [],
      items: []
    }
  }
}

// Vue3 + Vuetify3 示例
<script setup>
import { ref } from 'vue'
const currentPage = ref(1)
const itemsPerPage = ref(50)
const headers = []
const items = []
</script>

2. 给v-data-table绑定分页属性 #

修改你的表格组件代码，双向绑定分页变量：

<!-- Vuetify2 写法 -->
<v-data-table
  dense
  :headers="headers"
  :items="items"
  :page.sync="currentPage"
  :items-per-page.sync="itemsPerPage"
  :footer-props="{
    'items-per-page-options': [10, 50, 100]
  }"
>
  <template #item.index="{ index }">
    <div class="text-caption text-right">
      <!-- 行号计算公式：(当前页-1)*每页条数 + 当前页的索引 +1 -->
      {{ (currentPage - 1) * itemsPerPage + index + 1 }}.
    </div>
  </template>
</v-data-table>

<!-- Vuetify3 写法 -->
<v-data-table
  dense
  :headers="headers"
  :items="items"
  v-model:page="currentPage"
  v-model:items-per-page="itemsPerPage"
  :footer-props="{
    'items-per-page-options': [10, 50, 100]
  }"
>
  <template #item.index="{ index }">
    <div class="text-caption text-right">
      {{ (currentPage - 1) * itemsPerPage + index + 1 }}.
    </div>
  </template>
</v-data-table>

说明 #

• 绑定的两个变量会跟随用户切换页码、修改每页条数的操作自动更新，不需要额外监听事件
• 如果你需要在方法里调用这两个值，直接访问对应的响应式变量即可

内容的提问来源于stack exchange，提问作者DevonDahon