【问题标题】：How to set initial 'rows per page' value in Vuetify DataTable component?如何在 Vuetify DataTable 组件中设置初始“每页行数”值？
【发布时间】：2019-08-20 00:11:31
【问题描述】：

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

现在我想在进入页面时从这个 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>

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

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

【讨论】：

如何将“All”选项添加到 rows-per-page-item？

【解决方案2】：

如果有人遇到这个但想要它用于 vuetify 2

它已更改为使用页脚道具

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

全部为 -1

查看vuetify docs中的api 使用表格 API 的 v-data-footer 组件中的页脚道具。

【讨论】：

【解决方案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
    }, ...
  }
}

【讨论】：

【解决方案4】：

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

它已更改为使用旧烤肉串套管项目每页选项中的骆驼套管itemsPerPageOptions

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

【讨论】：

【解决方案5】：

这是 Vuetify 2.3+ 的当前解决方案。

单组件：

<v-data-table
  :items-per-page="10"
  :footer-props="{ 'items-per-page-options': [10, 50, 100, -1] }"
/>

全局覆盖：

可以覆盖组件属性上的default 属性：

import VDataFooter from 'vuetify/lib/components/VDataIterator/VDataFooter';

VDataFooter.options.props.itemsPerPageOptions.default = () => [10, 50, 100, -1];

这将避免您在每次渲染<v-data-table /> 时都必须设置页脚道具。

Nuxt.js 版

将以下文件 vuetify-defaults.js 添加到您的 plugins 目录：

import VDataFooter from 'vuetify/lib/components/VDataIterator/VDataFooter';

export default () => {
  VDataFooter.options.props.itemsPerPageOptions.default = () => [10, 50, 100, -1];
};

现在在您的 nuxt.js.config 文件中，将该文件添加到您的 plugins 数组中：

{
  plugins: [
    '~/plugins/vuetify-defaults.js'
  ]
}

【讨论】：