Vue3中使用Element-Plus分页组件
Element-Plus是基于Vue3的一套UI组件库，内置了分页组件，使用它可以快速实现分页功能。
首先，需要在项目中安装Element-Plus：
npm i element-plus
然后在项目入口文件中引入Element-Plus和样式文件：
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' // 引入样式文件
createApp(App)
.use(ElementPlus)
.mount('#app')
使用分页组件需要传递一些参数，包括：
- currentPage：当前页码
- pageSize：每页显示的条数
- total：数据总条数
- layout：分页布局，可以自定义显示哪些部分（如：'total, sizes, prev, pager, next, jumper'）
下面是一个使用Element-Plus分页组件的示例：
<el-pagination
v-model:currentPage="currentPage"
:page-sizes="[10, 20, 30, 50]"
:page-size="pageSize"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@current-change="handleCurrentChange"
@size-change="handleSizeChange">
</el-pagination>
其中，currentPage、pageSize、total和layout都是从父组件中传递过来的数据，handleCurrentChange和handleSizeChange分别是页码变化和每页显示条数变化时的回调函数。
详细的使用方法可以参考Element-Plushttps://element-plus.org/zh-CN/官方文档。