vue.js - Vuetify v-data-iterator 的 prop rows-per-page-items 确定每页的项目，而不是行

Question

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

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

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

非常感谢。

标签： vue.jspaginationvuetify.jsgrid-layout

Answer 1

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

使用响应式项目行控制每页的行数是一项数学挑战，涉及项目数、每页所需的行数和 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 列网格，因此确定colsprop 很简单......

 <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