[Vue] 对数组进行分页，结合 el-pagination 组件

分页函数

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

async function fetchData() {
  const { data } = await getDataList();
  list.value = data;
}

await fetchData();
</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 的结果会被更新，因此界面上的列表就实现了翻页。

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