elementplus的pagination怎么用

ElementPlus是一个基于Vue.js的开源UI组件库，它的Pagination（分页）组件可以帮助你在表格、列表等场景中实现数据的分页显示。使用ElementPlus的Pagination组件相当简单，以下是基本步骤：

1. 引入组件：首先需要安装ElementPlus并导入`Pagination`组件。在Vue文件中添加以下代码：

<template>
  <div>
    <el-pagination :total="total" :current-page="currentPage" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElPagination } from "element-plus";
const total = ref(10); // 总数据量
const currentPage = ref(1); // 当前页数
</script>

2. 定义状态：在这里，我们创建了两个ref变量`total`表示总数据量，`currentPage`表示当前页。

3. 绑定属性：在`<el-pagination>`元素上，传入`total`作为总页数，`currentPage`作为当前页码。你可以通过props或者计算属性来动态改变这两个值。

4. 控制导航：`element-pagination`提供了一些事件，如`current-change`用于处理页码切换，你可以监听这个事件并在其中更新业务逻辑。

示例：

<el-pagination
  :total="total"
  :current-page="currentPage"
  @current-change="handleCurrentChange"
/>

然后在`methods`中定义`handleCurrentChange(page) {}`方法，处理页面跳转。