如何在Vue.js中分页数组属性的子节？
当显示列表数据时，可以使用v-for迭代这些项。我有一些过滤器控制，增加或减少可见项目的数量(大小，类型，名字之类的东西)。
尽管如此，我还是想将页面上可见的数量限制为，比如说，10项。
换句话说，如果筛选器隐藏了100个结果项中的50个(这些项仍然存储在Vuex中)，我仍然希望能够分页5页(每次只分页10页)。
有几个插件就像这个似乎对此有所帮助。
然而，我想尝试手动完成它，以了解它是如何完成的，尽管我有点困惑。
回答 2
Stack Overflow用户
发布于 2018-05-06 19:50:04
既然你有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的源代码。
Stack Overflow用户
发布于 2018-05-06 19:28:33
好的，我只想用rest操作符除以每页显示的数据数，然后创建页面数+ 1，当然，还需要对空数据进行一些验证等等。
假设收到一个包含列表的对象，这个列表用数据表示所有数组，每个数组都是一行。
只需获取长度，用模块运算符将其除以，然后在您的示例中再添加一个，如果您有52个条目，并且希望每页有10个：
52 % 10 =2 52 / 10 =5
你需要5页+1页的两个项目。
所以我会这样做：
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;
}
}当然，这只是一个可能的解决方案，但我认为这可以让您以某种方式开始，代码只是为了帮助。祝好运
https://stackoverflow.com/questions/50203211
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号