vue element table列表删除某一页的最后一条数据之后页面不自动跳到上一页

项目场景:element 分页器

提示:这里简述项目相关背景:

例如:项目场景:删除某一页的最后一条数据之后页面不自动跳到上一页

解决方案:

 <!-- 分页组件 -->
            <el-pagination
              style="margin-top: 30px;"
              background
              :page-size="ruleForm.currentPageSize"
              :page-sizes="[10, 20, 30, 40]"
              layout="->,total,sizes, prev, pager, next, jumper"
              :total="count"
              :current-page.sync="ruleForm.currentPage"
              @size-change="sizeChangeHandle"
              @current-change="currentChangeHandle"
            >
            </el-pagination>
export default {
  data() {
    return {
    ruleForm: {
        currentPage: 1, // 当前页码
        currentPageSize: 10, //每一页显示的条数
      },
      totalPage: 0, // 总页数
      count: 0, // 数据总条数
      pagerCurrentPage: 1, // 分页栏当前页码
    };
  },
  created() {
  	//第一次进入页面的数据请求
    this.fetchData();
  },
  methods: {
    fetchData() {
   	  //数据请求
      findBlog(this.ruleForm).then(r => {
          this.tableData = r.data.data.records;
          this.count = r.data.data.total;
          this.totalPage = Math.ceil(this.count / this.ruleForm.currentPageSize);
          // 下面的 if 会在删除文章的时候可能会触发,例如最后一页只有一条数据
          // 删除之后,总页码数就会减一,当前页码数就大于了总页码数,所以要做处理
          if (this.ruleForm.currentPage > this.totalPage) {
            this.ruleForm.currentPage = this.totalPage;
            this.fetchData();
          }
      });
    },
    // 分页相关事件
    sizeChangeHandle(pagerNum) {
      // console.log(this.ruleForm, "每页条数");
      this.ruleForm.currentPageSize = parseInt(pagerNum);
      this.ruleForm.currentPage = 1;
      this.pagerCurrentPage = 1;
      this.fetchData();
    },
    currentChangeHandle(pageNum) {
      // console.log(this.ruleForm, "第几页");
      this.ruleForm.currentPage = parseInt(pageNum);
      this.fetchData();
    },
  },
};
</script>

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值