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