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

Question

我的部分代码
第一个分页

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

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

Answer 1

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

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