分頁組件是比較常用的，有表格的地方基本上都存在分頁，使用 elementui 里面的分頁進行封裝方便使用。

一. 后端分頁

<template>
  <div class="pagination">
    <el-pagination @size-change="sizeChange"
      @current-change="currentChange"
      :current-page="currentPage"
      :page-sizes="propPageSizes"
      :page-size="pageSize"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      v-if="total > 0">
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    callback: { // 獲取列表數據方法
      type: Function,
      default() {
        return function() {};
      }
    },
    propCurrentPage: { // 當前頁
      type: [Number],
      default: 1
    },
    propPageSizes: { // 配置每頁顯示多少條
      type: Array,
      default: function() {
        return [10, 20, 30];
      }
    },
    propPageSize: { // 默認每頁顯示條數
      type: [Number],
      default: 10
    },
    total: { // 數據總條數
      type: [Number],
      default: 0
    }
  },
  data() {
    return {
      currentPage: this.propCurrentPage, // 頁面的當前頁
      pageSize: this.propPageSize // 頁面分頁器大小
    };
  },
  methods: {
    // 改變當前頁
    currentChange(val) {
      this.currentPage = val;
      this['callback']();
    },
    // 改變每頁顯示多少條
    sizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this['callback']();
    }
  }
};
</script>

<style lang="less" scoped>
// 樣式根據自己的實際情況修改，也可以用下邊的
.pagination {
  margin-top: 20px;
  text-align: right;

  /deep/ .el-pagination.is-background .el-pager li,
  /deep/ .el-pagination.is-background .btn-prev,
  /deep/ .el-pagination.is-background .btn-next {
    color: #666;
    background-color: #fff;
    border: 1px solid #e4e9ec;
    border-radius: 4px;
  }

  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    color: #11889c;
    background-color: #fff;
    border: 1px solid #11889c;
  }

  /deep/ .el-pagination.is-background .btn-prev:disabled,
  /deep/ .el-pagination.is-background .btn-next:disabled {
    color: #c0c4cc;
  }
}
</style>

<Pagination 
  ref="pagination"
  :callback="getMsgList"
  :total="total">
</Pagination>

效果圖

二. 前端實現分頁

待更新。。。

這個分頁其實也沒什么難度，是后端實現的分頁，后面再總結下前端實現分頁的方法。有問題，歡迎大家隨時留言交流！