如何在 Vuetify DataTable 组件中设置初始“每页行数”值？

Question

我有一个带有 Vuetify DataTable 组件（Vuetify 1.5.7）并使用默认组件分页的页面。我使用 :rows-per-page-items 属性设置“每页行数”选择值。

现在我想在进入页面时从这个 rows-per-page-items 数组（不仅仅是第一个！）设置初始值。

有可能吗，我该怎么做？

表的示例代码如下所示：

<v-data-table
            :headers="headers"
            :items="equipment"
            class="elevation-1"
            :rows-per-page-items='[15, 30, 50, 100]'>
      <template v-slot:items="props">
        <td>{{ props.item.name }}</td>
      </template>
</v-data-table>

Answer 1

如果有人遇到这个但想要它用于 vuetify 2

它已更改为使用页脚道具

:footer-props="{'items-per-page-options':[15, 30, 50, 100, -1]}"

全部为 -1

请参阅vuetify 文档 中的v-data-footerapi 以及表 api 组件中的页脚道具。

Answer 2

使用pagination.sync来控制分页：

<v-data-table
            :headers="headers"
            :items="equipment"
            class="elevation-1"
            :rows-per-page-items="[15, 30, 50, 100]"
            :pagination.sync="pagination">
      <template v-slot:items="props">
        <td>{{ props.item.name }}</td>
      </template>
</v-data-table>
...
data() {
  return {
    pagination: {
      rowsPerPage: 30
    }, ...
  }
}

[ https://jsfiddle.net/95yf1xe8/ ]

Answer 3

这是 2.3.4+ 版本的当前界面：

<v-data-table
   ....
   :footer-props="{'items-per-page-options':[2,15, 30, 50, 100, -1]}"
   :options="options">
   ....
</v-data-table>
...
data() {
  return {
    options: {
      itemsPerPage: 100
    }, ...
  }
}

Answer 4

自答案被接受以来，API 已发生变化。它不适用于Vuetify 2, 与Vue 2

当前更新页脚中每页显示的活动项目以及从下拉列表中选择的选项的当前方法是通过元素footer-props上的属性v-data-table。items-per-page-options并在其中使用如下属性的对象：

<v-data-table
            :headers="headers"
            :items="items"
            :items-per-page="50"
            :footer-props="{ "items-per-page-options": [10, 20, 30, 40, 50, -1]}"
        ></v-data-table>

当然，您可以随意获取"items-per-page-options": [10, 20, 30, 40, 50, -1]值并将其移动到数据属性，与items-per-page值相同。当然，将其自定义为您想要过滤行的任何数值。

• -1- 是提供“给我所有数据整体”选项
• 就我而言，我希望在50每页上显示项目，并50在页脚"Rows per page ..."下拉列表中显示活动尺寸，并具有自定义页面尺寸选项，包括通过下拉列表选择的所有选项。我通过上面的代码实现了它，经过测试并发现它今天可以工作（答案中的日期）

享受 ：）

数据表中的示例显示了它