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

Question

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

无论如何，我想将页面上可见的数量限制为 10 个项目。

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

有几个插件 such as this one这似乎对此有所帮助。

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

Answer 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 的源。