用el-pagination做前端分页
时间: 2023-11-27 19:49:31 浏览: 31
el-pagination 是 element-ui 提供的分页组件,可以很方便地在 Vue 项目中使用。
首先,在 Vue 组件中引入 el-pagination:
```javascript
<template>
<div>
<el-pagination
:current-page="currentPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
/>
</div>
</template>
<script>
export default {
data() {
return {
currentPage: 1,
pageSize: 10,
total: 1000,
};
},
methods: {
handleCurrentChange(newPage) {
this.currentPage = newPage;
// TODO: 更新数据
},
handleSizeChange(newSize) {
this.pageSize = newSize;
// TODO: 更新数据
},
},
};
</script>
```
其中,`currentPage` 表示当前页码,`pageSize` 表示每页显示的数据条数,`total` 表示总数据条数。`layout` 属性定义了分页组件的布局,`@current-change` 和 `@size-change` 事件分别对应用户改变当前页码和每页显示数量时的回调函数。
在 `handleCurrentChange` 和 `handleSizeChange` 函数中,你需要更新数据并重新渲染页面。
最后,你还需要在后端实现分页功能,将当前页码和每页显示的数据条数传给后端,让后端返回对应的数据。这个过程可以使用 axios 或其他网络请求库实现。