期望实现
- 前端分页请求服务端数据,页面渲染成列表
- 前端操作删除列表里一项或多项(一条或多条数据),页面立刻移除这一项或多项
- 前端再次分页请求服务端数据,列表正常显示
问题分析
一般来说,每次请求的数据条数 pageSize
是固定的,pageIndex
从 1
开始。
移除项,相当于删除队列里的n项,后面的数据再向前移n项,所以需要根据 pageSize
和 删除的条数,重新计算当前 pageIndex
。
再次请求数据时,可能会请求到重复数据,所以需要处理返回的数据,避免重复渲染。
解决方案
- 设置变量对当前实际渲染的项进行计数,如
itemCount
,初始值为0
; - 移除项,前端移除
dom
,itemCount减1
,计算新的pageIndex
:
itemCount--;pageIndex = Math.floor(itemCount / pageSize) + 1;
- 服务端返回数据后,移除重复的数据,更新
itemCount
const list = result.re; // 列表数据list.splice(0, itemCount % pageSize); // 移除重复数据itemCount += list.length; // 更新itemCount