时间戳

首页 > 解决方案 > 外部分页 vuetify 数据表

vue.js - 外部分页 vuetify 数据表

问题描述

我有从 API 返回的对象，格式如下：

{
 "count": 0,
 "result": [
    {
     "id": "5dfbb8d5b2f68faf05688997",
     "createdOn": "1577121878136",
     "hash": "d7a3a552a2c1a765b3bcd935980a1982",
     "modifiedOn": "1577121878136",
     "company": {},
     "home": {},
     "first_name": "string",
     "last_name": "string",
     "isActive": true,
     "funding": "string",
     "medication": "string",
     "startDate": "string"
    }
  ]
}

我vuex用来存储数据。我如何使用vuetify's v-data-table进行分页。后端是分页的。我的 api 是axios.get(..../?page='+page + '&count='+count)'我需要传递page并count作为参数来获取分页数据。

如果你能链接我一些资源来做这件事，我将不胜感激。我试过了，但我没能做到，也没有找到任何材料。我关注vuetify's docs了，external pagination但它假设数据仅在外部分页，它们不链接到veux store.

标签： vue.jsvuejs2vue-componentvuexvuetify.js

解决方案

使用这些参数调用 v-data-table。

<v-data-table
        :headers="yourHeadersArrayOfObject"
        :items="yourItemsArrayOfObject"    
        :page="yourCurrentPageNumber"
        :items-per-page="yourItemsPerPage"
        @update:page="pageUpdateFunction"
      ></v-data-table>

在方法处理页面更新=>

pageUpdateFunction(newPageNumber) {
  console.log(newPageNumber);
  // handle other axios request here and update varibles
},

推荐阅读