Vuetify 1.5服务器端分页异常：无法显示总条数及切换页码

针对你遇到的问题，核心原因是分页状态同步冲突、响应式变量未正确声明，以及事件监听重复导致表格状态异常，以下是具体修复步骤：

1. 移除重复的分页事件绑定 #

模板中同时使用:pagination.sync="pagination"和@pagination="onPaginationChanged"会导致状态同步冲突，保留.sync语法即可，模板修改为：

<v-data-table
  :headers="headers"
  :items="desserts"
  :pagination.sync="pagination"
  :total-items="totalDesserts"
  :loading="loading"
  class="elevation-1">
  <template v-slot:items="props">
    <td class="text-xs-right">{{ props.item.calories }}</td>
    <td class="text-xs-right">{{ props.item.fat }}</td>
    <td class="text-xs-right">{{ props.item.carbs }}</td>
    <td class="text-xs-right">{{ props.item.protein }}</td>
    <td class="text-xs-right">{{ props.item.iron }}</td>
  </template>
</v-data-table>

2. 确保响应式变量正确声明 #

在组件的data中明确声明相关变量，否则Vue无法监听其变化：

data() {
  return {
    pagination: {
      page: 1,
      rowsPerPage: 3
    },
    totalDesserts: 0,
    loading: false,
    desserts: [],
    fromDate: '', // 根据实际业务初始化
    toDate: ''    // 根据实际业务初始化
  }
}

3. 校验总条数获取逻辑 #

确认响应头的键名是否正确（axios会自动将响应头转为小写），可打印日志验证：

async showDesserts () {
  this.loading = true
  const { page, rowsPerPage } = this.pagination
  const params = `&page=${page - 1}&size=${rowsPerPage}`
  this.getDesserts(this.fromDate, this.toDate, params)
    .then((response) => {
      this.desserts = response.data
      // 打印确认是否拿到正确的总条数
      console.log('Total count:', response.headers['x-total-count'])
      this.totalDesserts = parseInt(response.headers['x-total-count'], 10)
      this.loading = false
    }).catch(error => {
      console.error('Failed to fetch data:', error)
      this.loading = false
    })
}

4. 优化分页监听逻辑 #

保留Watch监听pagination变化，确保逻辑简洁：

@Watch('pagination', { deep: true })
onPaginationChanged () {
  if (new Date(this.toDate) >= new Date(this.fromDate)) {
    this.showDesserts()
  }
}

关键说明 #

• Vuetify 1.5的v-data-table通过:total-items接收总条数，以此判断是否存在下一页，只要totalDesserts正确赋值为4，分页控件会自动启用下一页按钮，并显示1-3 of 4的文本。
• 接口page从0开始、表格page从1开始的转换逻辑是正确的，无需修改。

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