vue解决el-pagination分页:删除最后一页的所有数据后(包括批量删除),刷新后数据表格为空问题

不知道大家有没有遇到过这种情况,在使用element-ui的el-pagination做分页的时候,假设表格第二页只有一条数据,这时我们进行删除操作后,拉取刷新表格,发现表格分页跳到第一页,但是总数是10条, 页面也没数据,这其实是分页的current值还是2导致的。

直接上代码:

export default {
  data() {
    return {
      pageInfo: {
        size: 20,
        sizes: [20, 50, 100, 200],
        total: 0,
        current: 1,
        pageTotal: null,
      },
    };
  },
  methods: {
    //删除时
    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()));
}

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » vue解决el-pagination分页:删除最后一页的所有数据后(包括批量删除),刷新后数据表格为空问题

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们