当前遇到的问题

当前数据量很大，需分页请求加载，其中涉及到局部数据删除，删除后不是刷新当前页面，那么如何使数据删除后无缝衔接呢？

思路：

1. 若请求数据总数total小于页码pageSize时，可以略过，不做处理。
2. 若请求数据总数total大于页面pageSize时，如果删除的数据为最后一个page的数据，则不处理，反之则需特殊处理。

处理逻辑

1. 例如我们的分页请求逻辑如下：

  let page = 1
  const pageSize = 10
  let pageList = []
  let hasMore = true
  let total = 0 // 请求数据总数

  // 请求分页数据
  private async getData() {
      if (!hasMore) return []
      let param = {
          page,
          pageSize
      }
      let { list, total } = await service.getList(param)
      if (page === 1) {
          this.total = total;
      }
      page++
      hasMore = list.length === pageSize
      pageList = [...list, ...pageList]
  }
  // 上滑加载分页数据
  private load() {
      this.getData()
  }
    // 正常删除数据
  private delItem(index) { // index 为pageList的索引
      if (!index && index != 0) return

      if (this.total <= this.pageSize || index > (this.pageList.length - this.pageSize) && index <= this.pageList.length) {
          this.pageList.splice(index, 1)
      } else {
          this.delMiddleItem(index)
      }
  }

2. 当请求数据总数total小于页码pageSize时或最后一个page的数据时, 删除列表中某条数据，则：

  this.delItem(index) // 直接删除该项

3. 若请求数据总数total大于页面pageSize时, 删除列表其中某条数据，则：

  private async delMiddleItem(index) {
      if (!index && index != 0) return
      let currentPage = Math.ceil((Number(index) + 1) / this.pageSize)
      this.page = currentPage
      // 删除的项所在的前一页数据
      let tempList = this.pageList.slice(0, (currentPage - 1) * this.pageSize)
      // pageList 下在删除项所在页之后的数据
      let lastList = this.pageList.slice((currentPage - 1) * this.pageSize, currentPage * this.pageSize)

      // 再次加载当前页的数据，会包含之前的下一页数据，所以需要与原数据去重
      this.hasMore = true
      let newList = await this.getData()
      let currentList = this.formatRepeat(lastList, newList) // 数据去重
      this.pageList = [...tempList, ...currentList]
  }
  // 对象去重
  private formatRepeat(a, b) {
        let obj = {}, arr = [];
        let allList = [...a, ...b]
        allList.forEach(item => {
            if (!obj[item.id]) {
                arr.push(item)
                obj[item.id] = true
            }
        })
        return arr
   }

如上，就可以页面无感知加载数据了。