vue.js - 如何更改 Vuetify 的 v-data-table 中特定页面的每页项目的行数？

Question

目前我正在使用 Vuetify 的 v-data-table 分页，效果很好。但是对于这个特定的用例，我需要将特定页面的每页行数更改为无限制。

我想到的一个解决方案，但需要更多关于过滤的工作，是使用服务器端过滤来获取 10 并禁用数据表中的分页限制。

aynone 对我的问题有更简单的解决方案吗？

Answer 1

1. 将道具添加到:options.sync="options"您的<v-data-table>

像这样 ：

<v-data-table
    :headers="headers"
    :items="desserts"
    :options.sync="options"
    :server-items-length="totalDesserts"
    :loading="loading"
    class="elevation-1"
></v-data-table>

2. 然后在你的 vue 的数据中添加对象选项。

    options: {
      itemsPerPage: -1,
    },
   

像这样 ：

    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      data () {
        return {
          options: {
            itemsPerPage: -1,
          },
          ...
        }
      }
    }