如何在Vuetify 1.5中对服务器数据进行分页？

Question

我正在尝试对 Vuetify 1.5 中的服务器端数据进行分页。数据库中有4条记录。我可以获取第一页 3 个条目的数据，但无法按预期显示总计数（尽管响应标头返回 4）和分页控件。话虽如此，我无法进入下一页显示第四个数据，因为由于某种原因分页被禁用。我试图交叉检查文档，但我不知道需要做什么才能解决这个问题。任何帮助将不胜感激。

下图应显示 4 中的 1-3。不知道为什么没有显示。

我使用了邮递员，分页适用于第 0 页（3 个条目）和第 1 页（单个条目）

 <v-data-table
      :headers="headers"
      :items="desserts"
      :pagination.sync="pagination"
      :total-items="totalDesserts"
      :loading="loading"
      class="elevation-1"
      @pagination="onPaginationChanged">
      <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>

   pagination = {
     page: 1,
     rowsPerPage: 3
    };
    
     @Watch('pagination', { deep: true })
     onPaginationChanged () {
    if (new Date(this.toDate) >= new Date(this.fromDate)) {
      this.showDesserts()
    }
  }
  
    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
        this.totalDesserts = parseInt(response.headers['x-total-count'], 10)
        this.loading = false
      }).catch(error => {
        console.error('Failed to fetch data:', error)
        this.loading = false
      })
  }

Answer 1

首先需要在Vue.js中安装Vueitify分页数据表组件，使用以下命令： npm 安装 vuetify-pagination-datatable 然后在项目的 HTML 模板中添加数据表组件。

分页={ 页数: 1, 每页行数：3 };

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

}

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
    this.totalDesserts = parseInt(response.headers['x-total-count'], 10)
    this.loading = false
  }).catch(error => {
    console.error('Failed to fetch data:', error)
    this.loading = false
  })

}