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

vue.js Vue.js

神乐古一

2020-03-12

在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方面。

谢谢！

第1195篇《在Vuetify数据迭代器+数据表中了解“每页项目的行数”，我可以设置默认页面吗？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
LEY逆天Near 2020.03.12

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

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

和你的组件标签道具：

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

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

理查德村村小宇宙 2020.03.12

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android