Vue.js 如何在 Vuetify DataTable 组件中设置初始每页行数值

发布于03月29日

我有一个带有Vuetify DataTable组件(Vuetify 1.5.7)的页面，并使用默认组件的分页.我使用:Rows per page items属性设置"Rows per page" Select 值.

现在，我想在进入页面时，从"每页行项目"数组(not only the first one!)中设置初始值.

有可能吗？我该怎么做？

表的示例代码如下所示:

<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/ ]