在做管理系统的过程中,想必大家都接触过表格的增删改查吧,最近我在项目中发现,对于表格删除和批量删除时,有个细节项目组的前端开发并没有注意到,显然也没有去处理,测试人员居然也没去测试这个场景。
当我们表格切换页码至最后一页时,有两种场景。
- 只有一条数据时,点击表格中删除按钮或者全选点击批量删除;
- 多条数据全选点击批量删除 删除的时候我们需要对当前页码进行一个处理,要不然会显示异常:原本有数据的页面确显示不出数据,因为页码没有变化。 这样的显示效果显然是不正确的,因此我们必须要做一些处理,处理的代码(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"都是代指