需求

一个list列表，当删除子元素时，做到用户无感删除，不需要频繁请求loading 请求列表

思路

不重新请求列表刷新数据，做到无感删除

面临问题

1, 列表是懒加载，删除元素时，如果调用下一页的懒加载，对丢失上一页的部分数据 因为删除数据后，数据会自动前补齐索引

例如： 1页10条 删除2条数据 第一页8条是在前端展示的，第一页后2条是后端补齐，但没有请求回来

解决方法

点击删除时 先删除 后请求删除接口

arr.splice(index, 1)

删除到位置时 会触发懒加载请求数据

1. 求取正常总数 请求总数 = 当前页数 * 每页条数

  let page = 1 //当前页数
  let pageSize = 10 //每页条数
  let arr = [] //前端操作后数据数组
  let totalNum = page * pageSize //请求总数
  let total = 0 // 请求回来的实时总数

2. 变动后的差的条数 正常条数 - 当前数据数组长度

  let val = totalNum - arr.length

3. 差条数 大于 0 && 请求回来的实时总数 ！== 前端操作后数据数组 说明差条数，并且不是最后一页，需要补齐当前页数据 否则 正常页数++ 正常请求

  if (val > 0 && total !== arr.length) {
  } else {
    page++ //页数++
    getfn()//请求数据
  }

4. 差的是本页的数据，还是上一页的数据，需要计算 相差的倍数 请求总数%实际总数/请求条数｜去除小数 = 整数倍数

  let multipleNum = totalNum % arr.length / pageSize | 0

5. 需要请求的页数 = 当前页数 - 相差的倍数

if (val > 0 && total !== arr.length) {
    page = page - multipleNum //差的是本页的数据
    ...
  } else {
    page.value++
    getfn()
  }

6. 懒加载时请求逻辑处理

let resList = {
  total: 100,
  [
    ...
  ]
} //请求回来的数据

 // 请求是否是最后一页 实时数组总数 小于 当前请求条数 肯定是最后一页
let lengthNum = 0 //需要截取的数组长度
if (resList?.length < pageSize) {
  // 最后一页 差总数几个就补几个 
  lengthNum = total.value - arr.length
} else {
  // 删除数字是否改变页数，未改变补齐相差条数，改变补齐当前页数   倍数大于0说明不是当前页了  需要补齐
  if (multipleNum > 0) {
    //改变 
    lengthNum = pageSize - (arr.length % pageSize) //差的条数 = 当前请求条数 - （前端操作后的条数 % 当前请求条数）ps:比如10条,当前条数8条,差2条就补2条
  } else {
    // 未改变补齐删除的当页条数
    lengthNum = val
  }
}
// 截取数据 补齐数据
arr.push(...(resList.splice(resList.length - lengthNum, lengthNum)) as any)