问题描述
页面分页时,每页显示10条,总记录数21条,第三页只有一条数据,删除后,分页组件显示的的2页,但是接口查询参数查询的第三页,导致无数据
解决思路
计算删除后还有多少条数据,实际的页数应该是多少,如果实际的页数减少了,再根据当前的页码进行判断,如果当前页码大于了删除后的最大页码,则修改当前页码为删除后的页码
代码
封装通用方法,便于多个页面使用
/**
* 通用改变当前页码: 解决删除最后一页所有数据后回到前一页无数据问题
* @param total 总记录数
* @param delNum 删除记录数据
* @param pageNum 当前页
* @param pageSize 每页条数
* @returns {number} 返回 处理后的当前页
*/
export function changePageNum(total,delNum,pageNum,pageSize) {
// 计算删除后的实际总页数
let totalPage = Math.ceil((total - delNum) / pageSize);
// 判断是否为最后一页
let currentPage = pageNum > totalPage ? totalPage : pageNum;
// 判断是否为第一页
return currentPage < 1 ? 1 : currentPage;
}
调用方法
/** 删除按钮操作 */
handleDelete(row) {
// 选择的列ID数组
const drawingIds = row.drawingId || this.ids;
this.$confirm('是否确认删除图纸管理编号为"' + drawingIds + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
// 删除方法
return delDrawing(drawingIds);
}).then(() => {
// ***在删除操作后调用处理当前页码方法,并赋值给当前页
// ***解决分页删除最后一页所有数据返回上一页无数据问题
this.queryParams.pageNum = this.$chengePageNum(this.total,drawingIds.length, this.queryParams.pageNum, this.queryParams.pageSize);
this.getList();
this.msgSuccess("删除成功");
})
},