我有一个包含Vuetify DataTable组件(Vuetify 1.5.7)并使用默认组件的分页的页面。我使用:rows-per-page-items属性设置“每页行数”选择值。
现在,我想在进入页面时从此“每页面行数”数组设置初始值(不仅是第一个!)。
有可能吗,我该怎么做?
该表的示例代码如下所示:
<v-data-table
:headers="headers"
:items="equipment"
class="elevation-1"
:rows-per-page-items='[15, 30, 50, 100]'>
<template v-slot:items="props">
<td>{{ props.item.name }}</td>
</template>
</v-data-table>
最佳答案
使用pagination.sync
控制分页:
<v-data-table
:headers="headers"
:items="equipment"
class="elevation-1"
:rows-per-page-items="[15, 30, 50, 100]"
:pagination.sync="pagination">
<template v-slot:items="props">
<td>{{ props.item.name }}</td>
</template>
</v-data-table>
...
data() {
return {
pagination: {
rowsPerPage: 30
}, ...
}
}
[https://jsfiddle.net/95yf1xe8/]