vue用elementUI,写一个页面多个分页Pagination怎么写

新手上路,请多包涵

我的部分代码
第一个分页

<div class="paging">
                <el-pagination
                  background
                  @current-change="handleCurrentChange"
                  :current-page.sync="currentPageNum"
                  :page-size="pageSize"
                  layout="total,slot,prev"
                  :total="this.solveLists.length"
                >
                  <el-button
                    :disabled="firstPageBtnDisabled"
                    class="first-pager"
                    @click="toFirstPage"
                  >首页</el-button>
                </el-pagination>
                <el-pagination
                  background
                  @current-change="handleCurrentChange"
                  :current-page.sync="currentPageNum"
                  :page-size="pageSize"
                  layout="pager,next,slot,jumper"
                  :total="this.solveLists.length"
                >
                  <el-button
                    :disabled="lastPageBtnDisabled"
                    class="last-pager"
                    @click="toLastPage"
                  >末页</el-button>
                </el-pagination>
              </div>

第二个分页

<div class="paging">
                <el-pagination
                  background
                  @current-change="handleCurrentChange1"
                  :current-page.sync="currentPageNum1"
                  :page-size="pageSize1"
                  layout="total,slot,prev"
                  :total="this.hotLists.length"
                >
                  <el-button
                    :disabled="firstPageBtnDisabled1"
                    class="first-pager"
                    @click="toFirstPage1"
                  >首页</el-button>
                </el-pagination>
                <el-pagination
                  background
                  @current-change="handleCurrentChange1"
                  :current-page.sync="currentPageNum1"
                  :page-size="pageSize1"
                  layout="pager,next,slot,jumper"
                  :total="this.hotLists.length"
                >
                  <el-button
                    :disabled="lastPageBtnDisabled1"
                    class="last-pager"
                    @click="toLastPage1"
                  >末页</el-button>
                </el-pagination>
              </div>

data里面(关于两个分页的参数全部后面加1,很傻的办法)

 // 分页
  //第一个
      pageSize: 4,
      currentPageNum: 1,
      total: 1,
      firstPageBtnDisabled: true,
      lastPageBtnDisabled: false,
      lastPageNum: Math.ceil(this.total / this.pageSize),
  //第二个
      pageSize1: 4,
      currentPageNum1: 1,
      total1: 1,
      firstPageBtnDisabled1: true,
      lastPageBtnDisabled1: false,
      lastPageNum1: Math.ceil(this.total1 / this.pageSize1)

methods里面(关于分页切换按钮,就只是参数变了)

// 分页功能

    handleCurrentChange(val) {
      this.firstPageBtnDisabled = val === 1 ? true : false;
      this.lastPageBtnDisabled = val === this.lastPageNum ? true : false;
      this.currentPageNum = val;
      console.log(val);
      this.$emit("handleCurrentChangeSub", val);
      //  切换锚点
      if (val == this.oldNum) {
      } else {
        this.oldNum = val;
        window.scrollTo(0, 300);
      }
    },
    toFirstPage(val) {
      this.handleCurrentChange(1);
    },
    toLastPage(val) {
      this.currentPageNum = this.lastPageNum;
      this.handleCurrentChange(this.lastPageNum);
    },
    // 分页功能
    handleCurrentChange1(val) {
      this.firstPageBtnDisabled1 = val === 1 ? true : false;
      this.lastPageBtnDisabled1 = val === this.lastPageNum1 ? true : false;
      this.currentPageNum1 = val;
      // console.log(this.firstPageBtnDisabled)
      this.$emit("handleCurrentChangeSub", val);
      // window.scrollTo(0, 300);
      //  切换锚点
      if (val == this.oldNum1) {
      } else {
        this.oldNum1 = val;
        window.scrollTo(0, 300);
      }
    },
    toFirstPage1(val) {
      this.handleCurrentChange1(1);
    },
    toLastPage1(val) {
      console.log(val)
      // let lastPageNum1=Math.ceil(this.hotLists.length / this.pageSize1)
      console.log(this.lastPageNum1)
      console.log(this.total1)

      // this.currentPageNum1 = this.lastPageNum1;
      this.handleCurrentChange1(this.lastPageNum1);
    }
  }

这一个页面只用了两个分页,我后面需要用到三个,四个分页,不可能再用这种憨憨办法了呀,有没有大佬教一下我

阅读 7.1k
1 个回答

慢慢逐渐养成一切皆组件的思维,
这是个掌握:把重复代码块抽出来做成组件,方便复用的机会,好好把握。

具体细节点比较多,不在一问一答简单范畴,这里给你指个方向,加油!

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题