我有一个包含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/]

10-05 20:43
查看更多