el-pagination实现动态分页
时间: 2023-12-28 15:03:51 浏览: 28
el-pagination是Element UI框架中的分页组件,可以用于实现动态分页。下面是一个简单的实现方法:
1. 在vue组件中引入el-pagination组件,并设置相应的属性:
```html
<template>
<div>
<el-pagination
:current-page="currentPage"
:page-size="pageSize"
:total="total"
@current-change="handleCurrentChange"
></el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
currentPage: 1,
pageSize: 20,
total: 0
}
},
methods: {
handleCurrentChange(val) {
this.currentPage = val
// 获取当前页数据
this.getData()
},
getData() {
// 根据当前页和每页数量获取数据
// ...
}
}
}
</script>
```
2. 在getData方法中发送请求获取数据,同时根据返回的数据设置total属性:
```javascript
getData() {
axios.get('/api/data', {
params: {
currentPage: this.currentPage,
pageSize: this.pageSize
}
}).then(res => {
this.total = res.data.total
// 处理数据
// ...
})
}
```
这样就能实现动态分页了。当用户点击分页组件时,会触发current-change事件,调用handleCurrentChange方法,再根据当前页和每页数量发送请求获取数据。