vue 數據假分頁？
我在網上查到的都是打API那種取數據分頁
那假設數據直接寫在前端呢？
這樣我能怎麼樣做數據的分頁功能？
想不太透呢
有請大神解說
data() { return {
realWebItems: [],
pageSize: 5,
}
},
this.webItems.forEach((res, index) => { if (index + 1 <= this.pageSize)
this.realWebItems.push(res)
})
[ {
name: 'a',
},
{
name: 'b',
},
{
name: 'c',
},
{
name: 'd',
},
{
name: 'e',
},
{
name: 'f1',
},
{
name: 'f2',
},
{
name: 'f3',
},
{
name: 'f4',
},
{
name: 'f5',
},
{
name: 'f6',
},
{
name: 'f7',
},
{
name: 'f8',
},
{
name: 'f9',
},
]
回答：
其实很简单，无非就是把获取数据改成了从本地数组读取罢了
const totalCollections = [
{id: 0, name: 'item 0'},
{id: 1, name: 'item 1'},
{id: 2, name: 'item 2'},
{id: 3, name: 'item 3'},
{id: 4, name: 'item 4'},
{id: 5, name: 'item 5'}
]
export default {
data() {
return {
page: 1, // 当前页
pageSize: 3, // 每页数量, 自己按需调整
currentPageData: [] // 当前页数据
};
},
mounted() {
this.loadData(this.page)
},
watch: {
page(newPage) {
this.loadData(newPage)
}
},
methods: {
loadData(page) {
this.currentPageData = totalCollections.slice((page - 1) * pageSize, page * this.pageSize)
}
}
}
以上是 vue 數據假分頁？ 的全部内容， 来源链接： utcz.com/p/935488.html
