el-pagination 分页怎么写
时间: 2024-05-01 09:17:06 浏览: 88
el-pagination 分页可以使用以下步骤进行编写:
1. 引入 el-pagination 组件:
```
<template>
<el-pagination
:total="total"
:page-size="pageSize"
:current-page="currentPage"
@current-change="handleCurrentChange"
layout="prev, pager, next"
/>
</template>
<script>
import { ElPagination } from "element-plus";
export default {
components: {
ElPagination,
},
data() {
return {
currentPage: 1,
pageSize: 10,
total: 100,
};
},
methods: {
handleCurrentChange(page) {
this.currentPage = page;
// 处理分页数据
},
},
};
</script>
```
2. 在 data 中定义 currentPage、pageSize 和 total 变量,分别表示当前页码、每页显示数量和总数据量。
3. 在 el-pagination 组件中绑定这些变量,并设置 layout 属性为 "prev, pager, next",表示显示上一页、页码和下一页。
4. 监听 @current-change 事件,当页码改变时调用 handleCurrentChange 方法,更新 currentPage 变量,并处理分页数据。
5. 在 handleCurrentChange 方法中处理分页数据,比如从后端获取对应页码的数据。
以上是一个基本的 el-pagination 分页的实现方法。具体细节可以根据实际需求进行调整。
阅读全文
相关推荐


















