不发送请求的分页效果

分页组件

<n-pagination
                  v-model:page="state.page2"
                  :page-count="Math.ceil(total2 / 3)"
                  :item-count="total2"
                  :page-size="3"
                  :page-slot="5"
                />

　　每页3条数据

通过计算属性和过滤返回的数据

  const state = reactive({
　　page:1
})
const newList = computed(() =>
    state.studyData.list.filter((m, n) => n >= (state.page - 1) * 3 && n < state.page * 3)
  )

　　数据展示

<template v-for="item in newList" :key="item.id">    //newList 是过滤出来的数据
              <n-skeleton v-if="state.studyData.loading" :width="100" size="medium" />
              <div v-else class="flex justify-between">
                <n-button text @click="openDrawer(item.uriLink)">{{ item.title }}</n-button>
                <n-time :time="new Date(item.createdAt)" type="date" />
              </div>
            </template>