表格,列表末尾数据删除后分页回退的处理
2023-02-18 16:33:36 时间
对于表格,列表末尾数据可删除时,存在删除后刷新数据,当前分页下无数据的问题。 这里需要对几种状态条件做处理:
- 删除后数据当前分页数据不为空
- 删除后数据当前分页数据为空,分页号不为1 即只剩最后一页
- 删除后数据当前分页数据为空,分页号为1
状况1和状态3: 直接刷新当前分页数据 状态2:需要获取前一页数据
所以处理的方式主要是对三种状态的判断和对应的分页号计算,注:这里可能存在删除一条或多条(批量删除)
实现
/**
* 列表删除最后当前分页是否为空,是否需要计算刷新的分页号
* @summary
* 通过total, pageSize 计算是否为第一页
* listOrLength, deleteLength 判断删除数据后
*/
export default function deleteLastPage (options) {
const {
pageNum,
total,
pageSize,
listOrLength,
deleteLength = 1
} = options
const totalPage = Math.ceil(total / pageSize)
const currentListLength = Array.isArray(listOrLength) ? listOrLength.length : listOrLength
// 判断是否删除末尾数据, 即: 末尾页的最后一条数据
const isLast = currentListLength <= deleteLength && (totalPage === pageNum)
if (!isLast) {
return pageNum
}
// const prePageNum = pageNum - 1
// if (prePageNum >= 1) {
// return prePageNum
// }
// return 1
// 与上面 prePageNum 获取的等价算法
return [pageNum - 1, 1].sort((a, b) => a - b)[1]
}
相关文章
- Vue CLI 2 脚手架 TabBar 组件封装
- Web文件上传靶场 - 通关笔记
- XSS跨站攻击靶场-通关笔记
- Payload 实现分离免杀
- 动态加载 ShellCode绕过杀软
- Vuex 3.x 状态管理模式
- 使用 backdoor 工具注入ShellCode
- 有趣的后渗透工具 Koadic
- Supervisor 管理器常见问题
- 初识 TypeScript
- VSCode 用户代码片段和生成器
- webpack 构建脚手架
- BUUCTF-Web-WriteUp
- vue-router 的基本使用
- 攻防世界-Crypto-进阶
- flex 弹性布局常用属性
- 三款真正免费的密码管理器软件推荐(免费也强大)
- HITCON2022--ctf驱动逆向题
- ES6 箭头函数 Arrow Function
- 软件测试|selenium使用文本定位