element-plus分页器

### Element Plus 分页器组件使用指南 #### 组件介绍 `ElPagination` 是用于处理大量数据分页展示的基础组件。该组件支持多种属性配置来满足不同场景下的需求[^1]。 #### 属性说明 - `total`: 总条目数，必填项。 - `page-size`: 每页显示多少条记录，默认值为 10。 - `current-page`: 当前页面索引，默认是从第一页开始计数即 1。 - `layout`: 布局控制参数，可以设置为 `"prev, pager, next"` 来只显示前后翻页按钮以及页码列表；也可以加入其他选项如 `"sizes", "jumper"` 等实现更多功能。 - `background`: 是否带有背景颜色，默认不带(`false`)。 #### 方法调用 通过监听事件可获取用户的交互行为并作出响应： - `size-change`: 页面大小改变时触发。 - `current-change`: 当前页发生变动时触发。 #### 示例代码 下面是一个简单的例子展示了如何创建一个具有基本功能的分页栏： ```html <template> <div class="block"> <el-pagination :total="50" layout="prev, pager, next" @current-change="handleCurrentChange" /> </div> </template> <script setup lang="ts"> import { ref } from 'vue' const currentPage = ref(1) function handleCurrentChange(val: number) { console.log(`当前页: ${val}`) } </script> ``` 此段代码实现了当点击不同的页码链接或者上下箭头切换到新页面的时候，在浏览器开发者工具中的console面板打印出新的页号信息。 #### 进阶应用实例 如果想要提供更灵活的选择给用户，则可以在布局里增加一些额外的功能模块： ```html <template> <div class="block"> <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="400" > </el-pagination> </div> </template> <script setup lang="ts"> import { ref } from 'vue' const pageSize = ref<number>(10); const currentPage = ref<number>(1); // 处理每页数量变化逻辑... function handleSizeChange(newPageSize:number){ console.log('每页:', newPageSize,'条'); } // ...其余同上 </script> ``` 上述案例中不仅包含了基础版本所拥有的特性外还加入了调整单次加载量（`page-sizes`）、跳转指定位置等功能，并且启用了样式化后的外观效果（设置了`background=true`）。