从material table删除任意用户后页码被重置的问题如何解决

问题根因 #

• 执行删除操作触发列表刷新时，请求接口未携带删除前的当前页码参数，默认使用第1页参数拉取数据
• 部分分页组件的默认逻辑会在列表总条数变更时自动重置页码为1，未做自定义适配

实现方案 #

1. 分页参数留存与逻辑处理 #

删除操作执行前后按如下逻辑处理分页参数即可实现需求：

• 触发删除前先留存当前页码currentPage、每页条数pageSize两个核心参数，不要随列表刷新重置参数值
• 删除接口调用成功后，先计算删除后的总数据量，再换算出删除后的最大有效页码：如果原页码大于最大有效页码（比如原第4页只有1条数据，删除后最大页码变成3），就将最终请求页码减1，否则保留原页码

示例代码（JS 伪代码）：

// 留存删除前的分页参数
const currentPage = this.pagination.pageNum
const pageSize = this.pagination.pageSize

// 调用删除接口
deleteItem(row.id).then(() => {
  // 计算删除后的总数据量、最大有效页码
  const totalAfterDelete = this.pagination.total - 1
  const maxValidPage = Math.ceil(totalAfterDelete / pageSize)
  // 生成最终请求页码，空页兜底到第1页
  const finalPage = currentPage > maxValidPage ? maxValidPage : currentPage
  const requestPage = finalPage > 0 ? finalPage : 1
  
  // 携带处理后的页码拉取最新列表数据
  fetchList({
    pageNum: requestPage,
    pageSize: pageSize
  })
})

2. 分页组件适配 #

如果你使用Element UI、Ant Design等组件库的分页/表格组件，需要调整组件配置避免默认重置页码：

• Element UI：不要在列表数据更新时主动重置current-page绑定的响应式变量，始终将其与处理后的requestPage绑定即可
• Ant Design：Table组件的pagination配置项中，current字段始终绑定处理后的页码变量，不要赋值为undefined触发默认重置逻辑

边界情况处理 #

• 如果删除的是最后一页的最后一条数据，处理后的页码会为0，需要主动兜底到第1页
• 如果分页参数同步在路由query中携带，删除成功后需要同步更新路由中的页码参数，避免页面刷新后参数不一致

内容的提问来源于stack exchange，提问作者Kartikay Krishnatra