前言
在前端开发过程中,Table分页、列表分页等等需求特别常见,笔者在最近开发过程中遇到当非第一页进行搜索、删除最后一条数据报错问题,因而再次做个记录,以供大家参考
业务场景
一、非第一页进行全局搜索遇到后端给出报错信息
在第二页进行全局搜索
打开浏览器控制器查看,发现页码、页数、搜索内容均传递给后端
原因 后端返回的数据不足以支撑当前页码、页数
解决方法
前端在进行搜索事件触发时,默认将页码重置为1
const getSearchVal = debounce(async (value) => {
reqParam.value.search = value
reqParam.value.page = 1 //在非第一页搜索时 返回内容默认第一页
const {
results, count } = await getList(reqParam.value)
tableData.value = results
pagination.value.total = count
pagination.value.current = reqParam.value.page
}, 200)
二、在非第一页删除最后一条数据遇到后端给出报错信息
解决方法
当删除非第一页最后一条数据后,应该将页码减一页或者为第一页
pagination.value.page = pagination.value.page - 1 || 1