业务效果
核心代码
<template>
<a-pagination v-model:current="current"
:total="total"
:pageSize="pageSize"
show-less-items
show-size-changer
:pageSizeOptions="['5', '10', '20', '50', '100']"
@change="pageNumChange"
@showSizeChange="pageSizeChange"
/>
</template>
<script>
// 当前页码变化
const pageNumChange = (page, pageSize) => {
detailPageData.value = mockPagination(pageSize, page, detailTotalPageData.value); // detailTotalPageData.value的值是从后端一次性获取所有的数据
}
// 当前页数量变化
const pageSizeChange = (cur, size) => {
pageSize.value = size;
current.value = cur;
detailPageData.value = mockPagination(pageSize.value, current.value, detailTotalPageData.value);
}
// 前端分页
const mockPagination = (pageSize, currentPage, arr) => {
let skipNum = (currentPage - 1) * pageSize;
return (skipNum + pageSize >= arr.length) ? arr.slice(skipNum, arr.length) : arr.slice(skipNum, skipNum + pageSize);
}
</script>