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抓紧创作!

微信微信 支付宝支付宝

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

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » vue解决el-pagination分页:删除最后一页的所有数据后(包括批量删除),刷新后数据表格为空问题

发表回复