В 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.
Спасибо!
Вы можете определить свойство данных так (если вы используете структуру шаблонов):
rowsPerPageItems: [10, 20, 30, 40],
pagination: {
rowsPerPage: 20
},
и реквизиты тегов компонента:
<v-data-iterator
:rows-per-page-items="rowsPerPageItems"
:pagination.sync="pagination"
... />
Значение prop-pagination-rows per page определяет ваше значение по умолчанию.
Для тех, кто использует 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"
>
Для таблицы данных 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]"
>