封装el-pagination（记录）

// 封装

<template>
  <el-pagination
    class="pagination"
    background
    layout="total, prev, pager, next"
    :current-page.sync="curPage"
    :total="total"
    :page-size="pageSize"
    @current-change="setCurrentPage"
  ></el-pagination>
</template>

<script>
export default {
  name: 'pagination',
  props: {
    total: {
      type: Number,
      default: 0
    },
    pageSize: {
      type: Number,
      default: 10
    },
    pageNum: {
      type: Number,
      default: 1
    }
  },
  data() {
    return { curPage: this.pageNum };
  },
  mounted() {
    console.log(this.curPage);
  },
  methods: {
    /**
     * 跳转分页
     * @curPage 跳转页码
     */
    setCurrentPage(curPage) {
      this.$emit('current-change', curPage);
    },

    /**
     * 重置分页工具
     */
    resetPagination() {
      this.curPage = 1;
    }
  }
};
</script>

<style lang="less" scoped>
.pagination {
  width: 100%;
  display: flex;
  align-items: center;
  /deep/ .el-pagination__total {
    flex-grow: 1;
    font-weight: normal;
    b {
      font-weight: normal;
      color: #467bf6;
    }
  }
}
</style>

// 使用

<pagination
            :total="tableData.total"
            :pageSize="tableData.pageSize"
            :pageNum="tableData.pageNum"
            @current-change="getCurrentPage"
            ref="pagination"
          ></pagination>


import pagination from '@/components/pagination';
components: {
    pagination
  },


// 分页改变时
    getCurrentPage(val) {
      localStorage.setItem('pageNum', val);
      this.tableData.pageNum = val;
      this.getExamList(this.tableData.pageNum);
    },

// 如果需要手动修改要展示的页码

this.$refs.pagination.curPage = 1;

// 如果需要返回时还在当前页，可将页码存在缓存里

localStorage.setItem('pageNum', val);

 // 一开始看是否有缓存，获取之后即可展示返回的当前页
pageNum: parseInt(localStorage.getItem('pageNum'))
          ? parseInt(localStorage.getItem('pageNum'))
          : 1, // 页码