Question

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

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

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

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

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

Answer 1

由于您拥有Vuex，因此吸气剂似乎最简单。

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

Answer 2

好吧，我只想将项目数除以我希望每页显示的数据的数量与其余的运算符并创建页数+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;
  }
}

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

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

2 个答案: