vue解决 element分页:删除最后一页的所有数据后(包括批量删除),刷新后数据表格为空。(前端、后端两种方法)

15 篇文章 0 订阅
11 篇文章 0 订阅
表格第二页只有一条数据,这时删除后,拉取刷新表格,发现表格分页跳到第一页,但是总数是20条,
页面也没数据,这其实是分页的current值还是2导致
直接上代码
	data() {
	    return {
	      pageInfo: {
	        size: 20,
	        sizes: [20, 50, 100, 200],
	        total: 0,
	        current: 1,
	        pageTotal: null
	      },
   		 }
//删除时
 	handleDel(taskRow) {
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delTaskLog(taskRow.id).then(res => {
          this.$message.success('操作成功')
          this.reSizePage()//这里改变当前current值
          this.loadData()
        }).catch(error => {
          this.$message.error(error.msg)
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 关于最后一页删除问题
    reSizePage(num) {
      const totalPage = Math.ceil((this.pageInfo.total - 1) / this.pageInfo.size)
      const pagenum = this.pageInfo.current > totalPage ? totalPage : this.pageInfo.current
      this.pageInfo.current = pagenum < 1 ? 1 : pagenum
    }

//以上只能解决单个删除,以下是批量删除
	getTableData(){//获取表格数据
		fetchPage(cleanObject(obj)).then(response => {
	        const { data } = response.data.data
	        this.tableData = data.records
	        this.pageInfo.pageTotal = data.records.length //当前页总数(自己定义的)
	        this.pageInfo.total = data.total //pagention绑定的所有页总数    
      })
	}
	//删除时
	 handleDel(ids) {
	      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
	        confirmButtonText: '确定',
	        cancelButtonText: '取消',
	        type: 'warning'
	      }).then(() => {
	        particle.delParticle({ ids: ids }).then(res => {
	          this.$message.success('操作成功')
	          this.reSizePage(ids.length) //这里改变当前current值
	          this.loadData()
	        }).catch(error => {
	          this.$message.error(error.msg)
	        })
	      }).catch(() => {
	        this.$message.info('已取消删除')
	      })
	    },
	     // 关于最后一页删除问题
    reSizePage(num) {
      if (num === this.pageInfo.pageTotal) {
        this.pageInfo.current = (this.pageInfo.current - 1) || 1
      }
    }

//后端解决逻辑:判断第二页是否有数据,如果没数据,就返回第一页数据
IPage resultPage = this.page(fdParticlePageDTO.getPage(), wrapper1.lambda().orderByDesc(FdParticle::getUpdateTime).eq(FdParticle::getType,fdParticlePageDTO.getType()));
if (fdParticlePageDTO.getPage().getCurrent() > 1 && resultPage.getRecords().size() == 0){
   fdParticlePageDTO.getPage().setCurrent(fdParticlePageDTO.getPage().getCurrent() -1);
   resultPage = this.page(fdParticlePageDTO.getPage(), wrapper1.lambda().orderByDesc(FdParticle::getUpdateTime).eq(FdParticle::getType,fdParticlePageDTO.getType()));
}

// 请求两次
在这里插入图片描述

  • 3
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值