Понять "rows-per-page-items" в Vuetify Data iterators + Таблицы данных, можно ли задать страницу по умолчанию?

В Vuetify docs для таблиц данных и docs для итераторов данных мне не удается понять, как используются rows-per-page-items, а также какие есть опции, и не найти подробного объяснения в каком-либо другом месте.

В частности, я хочу знать, что если бы можно было использовать упомянутую опору, чтобы установить для selected-row-per-page-amount значение по умолчанию, отличное от первого в выборе.

Например, выпадающий выбор:

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.

Спасибо!

Ответ 1

Вы можете определить свойство данных так (если вы используете структуру шаблонов):

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

и реквизиты тегов компонента:

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

Значение prop-pagination-rows per page определяет ваше значение по умолчанию.

Ответ 2

Для тех, кто использует 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"
>

Ответ 3

Для таблицы данных 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]"
      >