Pagination 分页 封装

1、分页子组件

<template>
  <div style="text-align: right; padding-right: 50px; padding-top: 15px">
    <el-button
      size="mini"
      @click="currentChange(currentPage)"
      style="vertical-align: sub"
      >刷新</el-button
    >
    <el-pagination
      v-show="total > size"
      @size-change="sizeChange"
      @current-change="currentChange"
      :current-page="currentPage"
      :page-sizes="sizes"
      :page-size="size"
      :layout="layout || pageLayout"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isSizeChange: false,
      sizes: [10, 20, 30, 50, 100], //选择每页显示个数的选项
      size: 20, //默认每页显示多少条数据
      currentPage: 1, //当前页数
      startIndex: 0,
      pageLayout: "total, sizes, prev, pager, next, jumper", //组件布局
    };
  },
  props: ["total", "layout"],
  methods: {
    /* 
    修改页码大小
    */
    sizeChange(size) {
      this.size = size;
      var page = this.startIndex / size;
      page = page + 1 - (page % 1);
      this.currentPage = page == 0 ? 1 : page;
      if (this.currentPage > 1) {
        this.startIndex = (this.currentPage - 1) * this.size;
      } else {
        this.startIndex = 0;
      }
      this.isSizeChange = true;
      this.$emit("on-change", size, this.currentPage);
    },
    /* 
    当前页变动
    */
    currentChange(page) {
      var elTable = document.getElementsByClassName("el-table__body-wrapper");
      if (elTable.length) {
        elTable[0].scrollTop = 0;
      }
      document.getElementById("app-main").scrollTop = 0;
      this.currentPage = page;
      this.startIndex = (page - 1) * this.size;
      if (!this.isSizeChange) {
        this.$emit("on-change", this.size, this.currentPage);
      }
      this.isSizeChange = false;
    },
  },
};
</script>

2、父页面

<!-- 
    分页 
    queryList 获取table表单数据
-->
<pagination ref="page" @on-change="queryList" :total="result.total"></pagination>

3、获取table表单数据

queryList() {
    this.formData.curPage = this.$refs.page.currentPage; //当前页码
    this.formData.pageSize = this.$refs.page.size;//每页大小

    // 调用查询接口
    this.API.system.currencyList(this.formData).then(res => {
    this.result = res.content;
    });
}