element分页操作删除最后一条记录为空的问题

当最后一页只有一条数据要进行删除时

可以发现当前页已经变了,但是呢记录为空

答案其实很简单,element-ui的分页组件在你删除最后一页数据的时候默认的还是会显示在最后一页,此时最后一页已经没有数据了,所以就显示暂无数据,需要手动去跳转到第一页或者重新刷新页面才能看到第一页的数据。

那么我们的解决办法就很清晰了,
1.如果是删除最后一页的最后一条数据,则要跳转到第一页
2.如果不是则继续显示在当前页中
在重新渲染数据之前加上这些操作,就可以实现了

单个删除的解决方法

//当前页为最后一页并且只有一条数据要删除时,跳转到上一页
    countPage() {
      //记录总页数
      //总页数=删除后的总记录数/分页条数
      let totalPage = Math.ceil((this.total - 1) / this.pageSize)

      //记录当前页码
      //记住删除最后一条数据时当前码是最后一页
      let pageNum = this.currentPage > totalPage ? totalPage : this.currentPage
      //重新记录当前页码
      this.currentPage=pageNum<1?1:pageNum
    }
    //重新加载数据
    this.load()

解决批量删除时页面为空情况

 countPage() {
      //记录总页数
      //总页数=删除后的总记录数/分页条数
      let totalPage = this.multipleSelection?
          Math.ceil((this.total - this.multipleSelection.length) / this.pageSize) :Math.ceil((this.total - 1) / this.pageSize)

      //记录当前页码
      //记住删除最后一条数据时当前码是最后一页
      let pageNum = this.currentPage > totalPage ? totalPage : this.currentPage
      //重新记录当前页码
      this.currentPage=pageNum<1?1:pageNum
  //重新加载数据
    this.load()
    }
posted @ 2022-07-14 22:20  长情c  阅读(874)  评论(5)    收藏  举报