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()));
}

以上关于vue解决el-pagination分页：删除最后一页的所有数据后(包括批量删除)，刷新后数据表格为空问题的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。