如何在 Vue.js 中对数组属性的子部分进行分页？答案

【问题标题】：How to paginate subsections of an array property in Vue.js?如何在 Vue.js 中对数组属性的子部分进行分页？
【发布时间】：2018-05-07 04:32:30
【问题描述】：

显示列表数据时，可以使用v-for 遍历项目。我有一些过滤器控件可以增加或减少可见项目的数量（大小、类型、名称 - 类似的东西）。

不管怎样，我想将页面上可见的数量限制为 10 个项目。

换句话说，如果过滤器隐藏了 100 个结果项中的 50 个（它们仍存储在 Vuex 中），我仍然希望能够分页 5 页（一次仅 10 个）。

有一些插件 such as this one 似乎对此有所帮助。

但是，我想尝试手动完成它以了解它是如何完成的，尽管我有点难过。

【问题讨论】：

到目前为止您尝试过什么？你能分享你的代码并解释你遇到了什么错误吗？
您基本上想要slice 进行迭代。 results.slice(start, start + itemsPerPage)和增减start。
顺便说一下，vuejs-paginator 对 http.get() 调用进行分页（这样可以最大限度地减少内存占用）。这是您想要的功能吗？

标签： javascript vue.js pagination vuex

【解决方案1】：

既然你已经安装了 Vuex，getter 似乎是最简单的。

export const getters = {
  pagedItems: state => {
    return pageNo => {
      const pageSize = state.pageSize || 10
      const items = state.items || []
      return items.slice(pageNo * pageSize, pageSize) 
    }
  }
}

默认值（例如state.items || []）用于在初始加载完成之前停止计算错误。

在计算属性中的组件上使用它，这将在 pageNo 更改时使其反应，

computed: {
  pagedItems() {
    return this.$store.getters['pagedItems'](this.pageNo)
  },
},

我突然想到，如果您正在过滤，您可能希望在之前应用分页，否则显示的大小可能不一致（例如页面1 筛选到 4 个项目，第 2 页到 6 个项目）。

取决于您的确切过滤器，应该很容易为filteredItems 添加一个getter 并将其用作pagedItems 的源。

【讨论】：

感谢您的回答。几乎没有切线相关：如果我有一组包括模糊搜索在内的多个过滤器，那么从概念上讲，如何确定应用它们的顺序/选择应用哪些顺序以减少潜在的内存和处理负载？跨度>
有趣，这似乎与 getter 解决方案有问题。让我考虑一下。
过滤不会简单地改变 Vuex 中数组的内容吗？这是我最初的直觉
我担心的是，初始结果数组包含 100,000,000 个项目，这可能会开始导致问题。永远不会是这样，但你知道我的意思。
我不确定这会有多大的问题。请参阅Array.prototype.slice()，其中说“slice() 方法返回一个浅拷贝”和“对于对象引用（而不是实际对象），切片将对象引用复制到新数组中”。因此，每个过滤器都会创建对象引用列表的子集副本，并保持原始数组不变。

【解决方案2】：

好吧，我只需将项目数除以我想用 rest 运算符在每页显示的数据数，然后创建页数 + 1，当然还有一些对空数据的验证等等。

假设您收到一个包含列表的对象，此列表表示包含您的数据的所有数组，每个数组是一行。

只要得到长度，用模块运算符将它除并再加一个，在你的情况下，如果你有 52 个项目，并且希望每页有 10 个：

52 % 10 = 2 52 / 10 = 5

您需要 5 页 + 1 用于 2 个项目。

所以我会这样做：

const NUMBER_ITEMS_PER_PAGE = 10;

const numberItems = list.length;
const pages = numberItems / NUMBER_ITEMS_PER_PAGE

if(numberItems % NUMBER_ITEMS_PER_PAGE > 0) {
  pages++;
}

function buildPages(numberPages) {
  const pageObj = {}
  for(var i = 0; i < pages; i++) {
    pageObj.page[i+1]
    const arr = []
    for(var j = 0; j < (NUMBER_ITEMS_PER_PAGE) * (i + 1); j++) {
      arr.push(lists[i]) 
    }
   pageObj.page[i+1] = arr;
  }
}

当然这只是一种可能的解决方案，但我认为这可以让您以某种方式开始，代码只是为了提供帮助。祝你好运

【讨论】：