在做管理系统的过程中,想必大家都接触过表格的增删改查吧,最近我在项目中发现,对于表格删除和批量删除时,有个细节项目组的前端开发并没有注意到,显然也没有去处理,测试人员居然也没去测试这个场景。
当我们表格切换页码至最后一页时,有两种场景。1、只有一条数据时,点击表格中删除按钮或者全选点击批量删除,2、多条数据全选点击批量删除。删除的时候我们需要对当前页码进行一个处理,要不然会显示异常。如下图
场景一:只有一条数据时,点击表格中删除按钮或者全选点击批量删除
删除之后
场景二:多条数据全选点击批量删除
删除之后
这样的显示效果显然是不正确的,因此我们必须要做一些处理,处理的代码(axios未做封装,数据key: "value", token: "XXX",url = "url"都是代指,代码与实际项目中项目做了一些调整,相信大家能看明白)如下:
data中的部分定义:
totalCount: 0, //总条目数
currentPageIndex: 1, //当前页码
pageSizeNum: 10, //每页显示的条目数
selectArr: [],//批量删除选择的数据
methods中的部分代码:
/**
*删除数据API,批量删除时,key为字符串以','拼接
* @param {String} paramData:删除的数据
* @param {String} delFlag:"volumeDelete"表示批量删除,可选参数
*/
deleteTableItem(paramData, delFlag) {
let url = "url";
let data = {
key: "value"
};
let param = {
data: data,
token: "XXX"
};
axios.post(url, param).then(res => {
if (res.data.code == 200) {
if (
this.totalCount - (this.currentPageIndex - 1) * this.pageSizeNum ==
1 || //最后一页,只有一条数据时,点击表格中删除按钮
(delFlag == "volumeDelete" &&
this.totalCount -
(this.currentPageIndex - 1) * this.pageSizeNum ==
this.selectArr.length) //最后一页,点击批量删除按钮时
) {
//处理页码显示问题
this.currentPageIndex =
this.currentPageIndex == 1
? this.currentPageIndex
: this.currentPageIndex - 1;
}
this.queryTableData();
}
});
},
/**
*查询数据API
*/
queryTableData() {
let url = "url";
let data = {
key: "value"
};
let page = {
index: currentPageIndex, //当前页码
pageSize: pageSizeNum //每页显示的条目数
};
let param = {
data: data,
page: page,
token: "XXX"
};
axios.post(url, param).then(res => {
if (res.data.code == 200 && res.data.data) {
this.tableData = JSON.parse(JSON.stringify(res.data.data)); //获取表格数据
this.totalCount = res.data.totalCount; //获取总条目数
this.selectArr = []; //清空批量删除选择的数据
}
});
}
在删除接口中对当前页码进行了处理,在查询数据的接口中获取总条目数,并且清空批量删除选择的数据。
再次说明,此代码只是为了展示,并非实际项目中的代码,因此未对axios做封装,数据key: "value", token: "XXX",url = "url"都是代指。