了解 Vuetify 数据迭代器数据表中的“rows-per-page-items”，我可以设置默认页面吗？

Question

在 Vuetify docs for Data Tables 和 docs for Data Iterators 中，我无法理解 rows-per-page-items 道具用法及其选项，也无法在任何其他地方找到任何详细说明。

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

例如，下拉选择：

 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]" ... />

但从 UX 角度来看，上述情况并不理想。

原文由 Nati Mask 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

对于使用 vuetify 2.0 的任何人，您必须像这样在数据表上使用 footer 属性：

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

原文由 Origin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

 rowsPerPageItems: [10, 20, 30, 40],
pagination: {
    rowsPerPage: 20
},

和你的组件标签道具：

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

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

原文由 Ollywood 发布，翻译遵循 CC BY-SA 4.0 许可协议