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

Posted 2023-02-22

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

【英文标题】：How to set initial 'rows per page' value in Vuetify DataTable component?

【发布时间】：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>

【参考方案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'
  ]