JSON数据格式

为了使Vuetable能够完成其任务,它需要使用某种JSON数据结构。这是Vuetable期望的默认数据格式:

{
  "links": {
    "pagination": {
      "total": 50,
      "per_page": 15,
      "current_page": 1,
      "last_page": 4,
      "next_page_url": "...",
      "prev_page_url": "...",
      "from": 1,
      "to": 15,
    }
  },
  "data": [
    {
      "id": 1,
      "name": "xxxxxxxxx",
      "nickname": "xxxxxxx",
      "email": "xxx@xxx.xxx",
      "birthdate": "xxxx-xx-xx",
      "gender": "X",
      "group_id": 1,
    },
      .
      .
      .
    {
      "id": 50,
      "name": "xxxxxxxxx",
      "nickname": "xxxxxxx",
      "email": "xxx@xxx.xxx",
      "birthdate": "xxxx-xx-xx",
      "gender": "X",
      "group_id": 3,
    }
  ]
}
 

通常,它查找两条信息。数据数组,分页信息。

它使用两个键(data-pathpagination-path)查看返回的对象以提取所需的信息。

  • data-path 指向数据数组
  • pagination-path 指向分页信息

在上面的示例中,data-pathdatapagination-pathlinks.pagination一个嵌套对象,这是Vuetable在未提供任何默认值的情况下使用的默认值。

如果您熟悉Laravel,您会知道当从应用程序的路由或控制器返回Eloquent对象时,Laravel会自动将查询数据转换为JSON格式。如果使用paginate() 函数,结果将类似于以下内容。

{
  "total": 50,
  "per_page": 15,
  "current_page": 1,
  "last_page": 4,
  "next_page_url": "...",
  "prev_page_url": "...",
  "from": 1,
  "to": 15,
  "data": [
    {
      "id": 1,
      "name": "xxxxxxxxx",
      "nickname": "xxxxxxx",
      "email": "xxx@xxx.xxx",
      "birthdate": "xxxx-xx-xx",
      "gender": "X",
      "group_id": 1,
    },
      .
      .
      .
    {
      "id": 50,
      "name": "xxxxxxxxx",
      "nickname": "xxxxxxx",
      "email": "xxx@xxx.xxx",
      "birthdate": "xxxx-xx-xx",
      "gender": "X",
      "group_id": 3,
    }
  ]
}

在这种情况下,你只需指定值,data-pathpagination-path像这样

  <div id="app">
    <vuetable
      api-url="/api/users"
      :fields="columns"
      data-path="data"
      pagination-path=""
    ></vuetable>
  </div>

这告诉Vuetable数据位于data 从服务器返回的JSON结构内部命名的路径中,而分页信息位于JSON结构的根目录中。

也可以看看