elmentplus页码
时间: 2025-07-05 11:04:27 浏览: 1
### Element Plus 分页组件 `el-pagination` 使用方法
#### 基本属性配置
为了使用分页组件,需引入并注册该组件。基本的分页器可以通过设置几个重要参数来定制化显示效果和行为。
- **total**: 总条目数。
- **page-size**: 每页显示条目个数,默认为10。
- **current-page**: 当前页码,默认为第一页。
- **layout**: 显示哪些部分,如:"prev, pager, next"表示只展示上一页、下一页按钮以及页码列表[^1]。
```html
<template>
<div class="pagination-container">
<!-- 分页组件 -->
<el-pagination
:total="total"
:page-size="pageSize"
:current-page.sync="currentPage"
layout="prev, pager, next"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
// 定义数据变量
const total = ref(100); // 数据总量
const pageSize = ref(10); // 默认每页数量
const currentPage = ref(1); // 初始页面索引
function handleSizeChange(val: number): void {
console.log(`每页 ${val} 条`);
}
function handleCurrentChange(val: number): void {
console.log(`当前页: ${val}`);
}
</script>
```
此代码片段展示了如何创建一个简单的分页控件,并监听其变化事件以便于更新视图或其他逻辑处理。
#### 高级特性支持
对于更复杂的需求场景,比如带有输入框调整每页大小的功能或者快速跳转到指定页等功能,则可以进一步扩展布局选项:
- 添加 `"sizes"` 和 `"jumper"` 关键字至 `layout` 属性中即可启用相应功能;
- 同时提供 `page-sizes` 数组用于定义可供选择的不同尺寸选项。
```html
<!-- 更多功能的分页组件 -->
<el-pagination
background
:total="total"
:page-size="pageSize"
:current-page.sync="currentPage"
:page-sizes="[10, 20, 30, 40]"
layout="sizes, prev, pager, next, jumper"
/>
```
通过上述方式能够构建出满足不同业务需求的强大分页工具。
阅读全文
相关推荐















