分页函数

file:[pager.ts]
/**
 * 分页
 *
 * @param list 数组
 * @param currPage 当前页
 * @param pageSize 一页数量
 * @returns
 */
export function paginate(list: Ref<any[]>, currPage: Ref<number>, pageSize: Ref<number>) {
  return computed(() => {
    const start = (currPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return list.value.slice(start, end);
  });
}

组件

<script setup>
const list = ref([]);
const currPage = ref(1);
const pageSize = ref(5);
const calcList = PagerUtil.paginate(list, currPage, pageSize);

PermissionHttp.findAuthorityListOfRoleButNohave({ roleId: '12345678' }, data => {
  list.value = data;
});
</script>
<template>
<div v-for="item in calcList">
  <div>{{ item.id }}</div>
</div>
<el-pagination
  small
  background
  v-model:current-page="currPage"
  v-model:page-size="pageSize"
  layout="sizes, prev, pager, next, jumper"
  :page-sizes="[5, 10, 15, 20, 25, 30]"
  :total="list.length" />
</template>

通过计算属性的结果来渲染列表，让翻页组件翻页时会改变 currPage 或 pageSize，计算属性所依赖的响应式数据检测到发生改变就会重新计算，返回最新结果，也就是 calcList 的结果会被更新，因此界面上的列表就实现了翻页。

这个是在数据库查询的数组没有分页能力时可以使用，如果后端查询的是分页就没必要使用这个函数了。