如今，在不引起加载延迟或渲染问题的前提下，以一种有效的方式显示数据比以往任何时候都更为重要。 分页是一种将大量数据的页面分解为较小的内容部分的技术，使用户更容易导航和查找所需信息。 分页增强了Web应用的用户体验，同时通过减少总页面加载时间来提高应用程序的性能。
然而，从头开始实现分页可能是一项耗时的任务，需要大量的努力和资源。 幸运的是，有几个优秀的开源库可用，可以简化该过程并提高效率。 使用分页库可以节省时间和精力，使您能够专注于构建应用程序的其他更重要的特性。
在本文中，我们将探讨一些最适合Vue 3的分页库，回顾它们的功能、流行程度和支持。 这些库配备了预构建的组件、样式和功能，使开发人员可以快速地将分页功能添加到其项目中。 让我们开始吧！
Vue Awesome Paginate
Vue Awesome Paginate库是一个现代且强大的库，具有各种轻量级、可定制和易于使用的分页组件。 Vue Awesome Paginate使用TypeScript和Vite构建，提供了所有分页功能的一个包，零依赖，易于安装和使用。
Vue Awesome Paginate提供了使用纯CSS完整定制每个组件的支持，允许您根据网站的设计自定义分页组件的外观和感觉。 它还提供RTL（从右到左）支持、SEO支持和不同的本地化支持：
Vue Awesome 分页组件示例
默认情况下，Vue Awesome Paginate使用以下属性和事件，您可以根据自己的喜好对其进行自定义：
<vue-awesome-paginate
:total-items="100"
:items-per-page="5"
:max-pages-shown="5"
v-model="currentPage"
:on-click="onClickHandler"
/>
v-page
v-page是一个简单灵活的Vue 3分页库，为用户提供了一系列自定义分页组件的功能，此外还提供更多可自定义选项的作用域插槽。
可以将“全部”选项添加到页大小列表中，以显示所有数据而无需分页，使用属性可以设置当前页、记录总数、分页语言、页面大小菜单、对齐方向等等。
当分页数据发生变化时，v-page库会触发一个change事件。 总的来说，v-page是对于希望在应用程序中实现分页的Vue开发人员来说具有许多自定义选项的实用库。 这是默认格式，因此您可以轻松添加其他属性：
<Page
:total-row="21"
@change="changeBasic"
/>
v-page示例UI
vuejs-paginate-next
vuejs-paginate-next是一个强大的Vue库，可简化在Vue 3应用程序中实现分页的过程。 为了完全支持Vue 3，vuejs-paginate-next库根据现有的vuejs-paginate库构建，后者仅支持Vue 2：
vuejs-paginate-next演示
该库提供了易于使用的API，使开发人员无需编写复杂的代码即可实现分页。 它提供了来自Bootstrap v5的默认样式，但可以通过CSS轻松自定义，从而方便地与现有应用程序设计集成。
vuejs-paginate-next提供了一系列自定义选项，包括显示的页面数量、每页项数和当前页数。 您可以按以下格式在组件中使用它：
<paginate
:page-count="20"
:click-handler="functionName"
:prev-text="Prev"
:next-text="Next"
:container-class="className"
/>
Vue UseuseOffsetPagination函数
在撰写本文时，Vue 3仍然相对较新，这意味着可用的Vue 3分页库选择有限。 然而，仍然有一些快速的解决方案可供开发人员使用；一种方法是使用提供可组合函数的外部库，例如Vue Use库中的分页函数。
Vue Use提供了一系列有用的组合函数，包括适用于Vue 3应用程序的分页函数。 Vue Use库轻巧，是Vue 3中实现分页的快速有效的解决方案。
下面的代码段显示了如何使用useOffsetPagination函数。首先，我们将库安装并导入组件：
npm i @vueuse/core
import { useOffsetPagination } from '@vueuse/core'
根据使用情况，我们可以定义所需的各种选项、参数和函数：
//创建一个从数据库中获取当前页面数据的函数
function fetch(page: number, pageSize: number) {
return new Promise<User[]>((resolve, reject) => {
const start = (page - 1) * pageSize
const end = start + pageSize
setTimeout(() => {
resolve(database.value.slice(start, end))
}, 100)
})
}
const data: Ref<User[]> = ref([])
const page = ref(1)
const pageSize = ref(10)
fetchData({
currentPage: page.value,
currentPageSize: pageSize.value,
})
//此函数调用fetch函数以获取当前页的数据
function fetchData({ currentPage, currentPageSize }: { currentPage: number; currentPageSize: number }) {
fetch(currentPage, currentPageSize).then((responseData) => {
data.value = responseData
})
}
接下来，我们可以将值传递到组合函数中：
//这显示了分页组合函数的实现，参数中的自定义值作为参数传入函数
const {
currentPage,
currentPageSize,
pageCount,
isFirstPage,
isLastPage,
prev,
next,
} = useOffsetPagination({
total: database.value.length,
page: 1,
pageSize,
onPageChange: fetchData,
onPageSizeChange: fetchData,
})
完成后，我们可以直接将其集成到模板中：
<div>
<div>
total: {{ database.length }}
</div>
<div>
<button :disabled="isFirstPage" @click="prev"> prev </button>
<button
v-for="item in pageCount"
:key="item"
:disabled="currentPage === item"
@click="currentPage = item"
>
{{ item }}
</button>
<button :disabled="isLastPage" @click="next">
next
</button>
</div>
这样，我们就轻松地为数据库列表实现了一个分页功能，允许我们按页面查看列表的分段部分。
结论
无论你正在构建一个简单的网络应用还是一个复杂的企业应用，实现分页功能都能大大增强用户体验并提升你的应用性能。借助分页库，你可以轻松高效地做到这一点。
在这篇文章中，我们回顾了三个优秀的开源分页库，以及Vue Use库中的可组合useOffsetPagination函数。在选择合适的分页库时，必须考虑你的项目的特定需求和期望的特性。每个库都有其优势和弱点，因此在做决定之前，你应该花时间分析每个库的功能，并考虑你的项目需求。所选的库应与网络应用的整体设计相符，确保分页功能感觉像是用户界面的自然部分。
