element-plus的分页

### Element Plus 分页组件使用教程 #### 基本属性配置 为了创建一个基本的分页控件，可以设置 `total` 和 `page-size` 属性来指定数据总量以及每一页显示的数据量。此外，还可以利用 `current-page` 来设定当前激活页面编号。 ```html <template> <el-pagination :total="100" :page-size="10"></el-pagination> </template> <script setup lang="ts"> // 这里不需要额外脚本逻辑用于展示最简单的例子 </script> ``` 此段代码展示了如何快速搭建起具有默认样式的分页栏[^1]。 #### 自定义布局选项 通过调整 `layout` 参数能够改变分页器内部元素排列方式，比如加入跳转输入框、前后翻页按钮等特性： ```html <template> <el-pagination background layout="prev, pager, next, jumper" :total="50"> </el-pagination> </template> ``` 上述模板实现了带有背景颜色且含有上一页/下一页链接加上定位至特定页码功能的分页导航条。 #### 动态响应变化 当用户交互触发了诸如点击不同页号之类的动作之后，可以通过监听 `update:currentPage` 或者直接绑定整个对象形式(`v-model`)来回传最新的状态给父级容器处理业务需求；而针对更复杂的场景，则建议采用事件驱动的方式捕获并响应这些变动。 ```javascript const handleCurrentChange = (val:number)=>{ console.log(`当前第 ${val} 页`); }; ``` 这段 JavaScript 函数会在每次切换新页时被调用，并打印出所处位置的信息[^5]。 #### 完整示例代码片段 下面给出的是集成了以上提到特性的综合案例，它不仅包含了必要的HTML结构还加入了TypeScript语法增强版Vue单文件组件(SFC)，使得开发者可以在实际开发过程中更加灵活地操作该插件的各项参数。 ```vue <template> <div class="example-container"> <!-- ...其他内容... --> <el-table :data="tableData.slice((currentPage-1)*pageSize, currentPage*pageSize)"> <!-- 表格列定义省略 --> </el-table> <div style='margin-top: 20px;'> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="sizes, prev, pager, next" :total="totalCount"> </el-pagination> </div> </div> </template> <script lang="ts"> import { ref } from 'vue'; export default { name: "PaginationExample", props:{ totalCount:Number, }, data(){ return{ tableData:[], // 数据源列表 pageSize: 10, // 默认每页大小 currentPage: 1,// 初始页码 } }, methods: { handleSizeChange(val){ this.pageSize=val; }, handleCurrentChange(val){ this.currentPage=val; console.log(`现在位于${this.currentPage}`); } } } </script> ``` 在这个完整的实例中，除了常规的分页外，还包括了一个表格视图用来呈现部分记录，同时也允许更改每页可见项的数量。