项目场景:
列表有多页数据,如果最后一页只有一条数据,当删除这条数据时,页码能够改变并且数据正确展示。
![在这里插入图片描述](https://img-blog.csdnimg.cn/0087074f86244439bce0fa8c446c13e1.png#pic_center)
问题描述
当删除这条数据时,页码可以正确展示,但是数据没有正确显示
![在这里插入图片描述](https://img-blog.csdnimg.cn/60bfc3b6c89f43daab261c1c5a646fa5.png#pic_center)
handleDelete(row) {
const id = row.userId;
this.$confirm(
'是否确认删除学号为"' + row.userName + '"的数据项?',
'警告',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
)
.then(function() {
return delStudent(id);
})
.then(() => {
this.msgSuccess('删除成功');
this.getList();
});
},
原因分析:
删除某页码最后一条数据后重新请求列表数据时传入的页码应该是某页码减一
当前页是第九页(pageCurrent:9),删除第九页最后一条数据之后,请求列表传入的页码应该是第八页(pageCurrent:8)
解决方案:
当删除数据之后,计算出总页码数,如果当前页码大于总页码,那么让当前页码等于总页码,否则当前页码不变;
注意:当数据总数正好是一条时,得到的总页码数是0;但是请求列表页码不得小于1,所以当当前页码是0时,让其页码等于1
handleDelete(row) {
const id = row.userId;
this.$confirm(
'是否确认删除学号为"' + row.userName + '"的数据项?',
'警告',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
)
.then(function() {
return delStudent(id);
})
.then(() => {
let totalPage = Math.ceil(
(this.total - 1) / this.queryParams.pageSize
);
let currentPage =
this.queryParams.pageCurrent > totalPage
? totalPage
: this.queryParams.pageCurrent;
this.queryParams.pageCurrent = currentPage < 1 ? 1 :currentPage;//notice!!!!
this.msgSuccess('删除成功');
this.getList();
});
},
项目疑问:
删除数据时为什么页码显示正确,但是实际上请求列表参数不对?
分页显示使用的是ElementUi组件pagination,当删除数据后没有进行处理时,返回的总数据数是正确的,pagination会自动识别然后显示在最后一页。