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/官方文档。