vue+element Pagination 分页 第二页删除最后一条数据自动跳到上一页
问题:当数据较多时使用element中的分页功能,在删除第二页的最后一条数据时,当前页数转成了上一页,可是页面数据并没有跳转到上一页
1.删除最后一条数据之前(当前页数为第二页)
2.删除最后一条数据之后(当前页数转为第一页,可是页面并没有跳转到第一页,而是显示暂无数据)
解决办法:
<!--分页-->
<div class="page">
<el-pagination
:page-sizes="[10, 20, 30, 50]"
:page-size="queryForm.limit"
:total="queryForm.total"
:current-page="queryForm.current"
layout="total, sizes, prev, pager, next, jumper"
prev-text="上一页"
next-text="下一页"
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
// data
data() {
return {
queryForm: {
current: 1, // 当前第几页
limit: 10, // 每一个页面限制10条数据
total: 0 // 数据总数
},
}
},
// methods
methods:{
// n页最后一条数据删除之后自动前往上一页
returnPage() {
console.log('删除之后的总页数', this.queryForm.total - 1)
if (this.queryForm.total - 1 === (this.queryForm.current - 1) *
this.queryForm.limit && this.total !== 0) {
this.queryForm.current-- // 当前页减一,跳转到上一页
this.close() // 关闭删除操作的弹窗--并重新请求数据
}
this.close() // 关闭删除操作的弹窗--并重新请求数据
},
}
//在删除数据成功之后调用this.returnPage()即可