Vue.js 了解Vuetify数据迭代器&x2B；数据表，我可以设置默认页面吗？

在Vuetify，我无法理解每页的

行项目

道具用法及其选项，也无法在任何其他地方找到任何详细解释

具体来说，我想知道的是，是否可以使用上面提到的道具将每页选择的行数设置为默认值，而不是选择中的第一个

例如，下拉选择：

Items per page:  10
                [20] -> Selected by default
                 30
                 40

我知道我能做到：

Items per page: [20] -> First, so will be selected by default
                 10
                 30
                 40

做：

<v-data-iterator :rows-per-page-items="[20, 10, 30, 40]" ... />

---

但是，就用户体验而言，上述情况并不理想。

您可以这样定义数据属性（如果您使用的是模板结构）：

以及您的组件标签道具：

<v-data-iterator
    :rows-per-page-items="rowsPerPageItems"
    :pagination.sync="pagination"
    ... />

“分页-每页行数”属性值定义默认值。

用于vuetify数据表

<v-data-table
        v-model="selected"
        :headers="headers"
        :items="items"
        select-all
        item-key="name"
        class="elevation-1"
        :rows-per-page-items="[20, 10, 30, 40]"
      >

---

对于任何使用vuetify 2.0的用户，必须使用数据表上的页脚属性，如下所示：

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

---

这是现在的最新版本。页脚道具中的itemsPerPageOptions字段。

非常有效！使用

pagination

prop！我该怎么给rowsPerPageItems添加一个“all”选项呢？@DeathInWhite它是-1thanks-api在1.5和2.0之间的差异使得这很难实现find@ValijonRahimov使用-1，例如

[10,20,30,40,50，-1]

:footer props=“{itemsPerPageOptions:[10,20,30，-1]}”

根据最新文档完成。非常有用的谢谢。谢谢这对我来说很有用，我知道

-1是用于显示所有内容的

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

:footer-props="{
    itemsPerPageOptions:[10,20,30,-1]
}"