项目场景: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>

Logo

前往低代码交流专区

更多推荐