AntDesign中a-pagination实现一次性获取所有数据下手动分页

业务效果

核心代码

<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>