el-pagination 是 Element UI 的一个分页组件,可以用于 Vue.js 项目中。
以下是一个简单的示例,展示了如何使用 el-pagination 分页:
1.在组件中引入 el-pagination 组件:
<template> <div> <!-- 你的页面内容 --> <el-pagination :current-page="currentPage" :page-size="pageSize" :total="total" @current-change="handlePageChange" > </el-pagination> </div> </template>
1.在组件的 data 中定义分页的相关参数:
export default { data() { return { currentPage: 1, // 当前页码 pageSize: 10, // 每页条数 total: 100, // 总条数 }; }, methods: { handlePageChange(currentPage) { // 处理页码变化的方法 }, }, };
1.在 handlePageChange 方法中处理页码变化事件,例如可以调用接口获取对应页码的数据:
handlePageChange(currentPage) { this.currentPage = currentPage; fetchData(this.currentPage, this.pageSize).then((res) => { // 更新数据列表 });
其中,fetchData 方法为自定义的获取数据的方法,currentPage 和 pageSize 是 el-pagination 组件传入的参数。
以上是一个简单的 el-pagination 分页示例,你可以根据实际需要自行调整相应的参数和处理方式。