vue基于element-ui二次封装分页组件

之前在写代码的时候，很多页面都会有table展示，有table分页也基本少不了，而且element-ui的分组组件提供了四个事件，以及那么多参数，若每个分页都写下，复用性太低了，方便统一风格，好维护。尤其是方法多了后，代码很杂。
版本：element-ui 2.13.1
vue 2.6.11

事件名称	说明	回调参数
size-change	pageSize 改变时会触发	每页条数
current-change	currentPage 改变时会触发	当前页
prev-click	用户点击上一页按钮改变当前页后触发 改变时会触发	当前页
next-click	用户点击下一页按钮改变当前页后触发	当前页

第一步，封装组件，把需要的属性提出来。

调用

 
 
 import Pagination from "@/components/Pagination/index";
  components: {
    Pagination
  },

定义

  data() {
    return {
      articleList: [],
      pageSize: 10,
      pageNum: 1,
      total: 0
    };
  },

方法

    pageChange(page) {
      this.pageSize = page._pageSize;
      this.pageNum = page._currentPage;
      this.getData();
    },