Question

我有一个带有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>

Answer 1

万一有人碰上这个东西，但想要它作为证人2

已更改为使用页脚道具

:footer-props="{'items-per-page-options':[15, 30, 50, 100, -1]}"

全部为-1

请参阅vuetify docs中的api 表格api的v-data-footer组件中的页脚道具。

Answer 2

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

Answer 3

这是从2.3.4+版本开始的当前界面：

<v-data-table
   ....
   :footer-props="{'items-per-page-options':[2,15, 30, 50, 100, -1]}"
   :options="options">
   ....
</v-data-table>
...
data() {
  return {
    options: {
      itemsPerPage: 100
    }, ...
  }
}

Answer 4

以防万一有人遇到这个但希望它用于最新的 vuetify 2

它已更改为使用旧烤肉串外壳 items-per-page-options 中的骆驼外壳 itemsPerPageOptions

:footer-props="{'itemsPerPageOptions':[15, 30, 50, 100, -1]}"

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

4 个答案: