如何在 Vuetify DataTable 组件中设置初始“每页行数"值?

本文介绍了如何在 Vuetify DataTable 组件中设置初始“每页行数"值?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个带有 Vuetify DataTable 组件(Vuetify 1.5.7)并使用默认组件分页的页面.我使用 :rows-per-page-items 属性设置了每页行数"选择值.

I have a page with Vuetify DataTable component (Vuetify 1.5.7) and using default component's pagination. I set the 'Rows per page' select values using the :rows-per-page-items property.

现在我想在进入页面时从这个 rows-per-page-items 数组(不仅仅是第一个！)设置初始值.

Now I want to set initial value from this rows-per-page-items array (not only the first one!) when entering the page.

这可能吗?我该怎么做?

Is it possible and how can I do this?

表的示例代码如下所示:

Example code of table is shown below:

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

这篇关于如何在 Vuetify DataTable 组件中设置初始“每页行数"值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

vuetify