在Vuetify数据迭代器+数据表中了解“每页项目的行数”,我可以设置默认页面吗?

在Vuetify 文档的数据表,以及文档数据迭代我不设法了解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方面。

谢谢!

LEY逆天Near2020/03/12 17:13:27

您可以这样定义data属性(如果使用模板结构):

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

和你的组件标签道具:

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

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

理查德村村小宇宙2020/03/12 17:13:27

对于vue数据表

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