Vue uses elementui to write multiple pagination of a page

The first page of part of my code

<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>

Second page

<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 (it's a silly way to add 1 after all the two paging parameters)

 // 分页
  //第一个
      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 (about the paging switch button, only the parameters have changed)

// 分页功能

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

This page only uses two pages. I need to use three or four pages later. It's impossible to use this kind of simple method again. Do you have a boss to teach me