Vuetify v-data-iterator 的属性 rows-per-page-items 确定每页的项目，而不是行

Question

我们正在使用 Vuetify 的 v-data-iterator 来控制网格布局上的分页。我们将迭代器的每页行数设置为 [8, 16, 24, 36]。但这并不能完全确定每页的行数，而是每页的项目数。也就是说，因为它是网格布局，所以每行可能有多个项目。所以如果我们将它设置为 8，我们会得到：

当然，这取决于屏幕尺寸，但这正是问题所在。 ACTUAL 行数取决于一行中可以容纳多少项。更糟糕的是，如果用户为每页 "rows" 选择 8，并且一行中只能容纳 3 个项目，则最后一行将只有 2 个项目，第三列有空隙。这是具有欺骗性的，因为看起来在第 8 项之后就没有更多的项了（这实际上已经欺骗了一些人，让他们认为他们正在寻找的项实际上并不存在）。他们需要查看页脚才能看到下一页上有更多项目。

我们想知道是否有一种方法可以配置 v-data-iterator 来限制实际行数而不是项目数。这意味着，例如，如果您每页有 2 行，则页面上可能有 8 个项目（在宽屏幕上）或页面上有 6 个项目（在较小的屏幕上），但至少在最后一个之后没有间隙页面上的项目（或者如果有间隙，那只是因为它实际上是最后一个项目）。

非常感谢。

Answer 1

Vuetify 似乎在 2.x 中取消了 rows-per-page-items，也许是因为这个原因。

控制每页行数 与项目数量、每页所需行数和 Vuetify 的 5 个响应断点有关的数学挑战。使用计算值，确定页数（用于分页）、每行项目（基于每个断点上您想要的列数），最后使用它来计算每页项目数 (ipp)...

computed: {
  numberOfPages () {
    return Math.ceil(this.beers.length / this.ipp)
  },
  itemsPerRow () {
    switch (this.$vuetify.breakpoint.name) {
      case 'xs': return 1
      case 'sm': return 2
      case 'md': return 3
      case 'lg': return 4
      case 'xl': return 6
    }
  },
  ipp () {
     return Math.ceil(this.rowsPerPage * this.itemsPerRow)
  }
},

并且由于 Vuetify 基于 12 列网格，确定 cols 道具很简单...

 <v-row>
    <v-col
        v-for="(item,idx) in props.items"
        :key="item.name"
        :cols="(12/itemsPerRow)">
     ....
    </v-col>
 </v-row>

演示：https://codeply.com/p/bFrSEsnq4L

Vuetify v-data-iterator 的属性 rows-per-page-items 确定每页的项目，而不是行

Vuetify v-data-iterator's prop rows-per-page-items determines items per page, not rows

pagination

grid-layout

vue.js

vuetify.js