【前端非第一页搜索、删除最后一条数据报错问题处理】

前言

在前端开发过程中，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