清哥的小屋

1
<template>
2
  <div class="pagination">
3
    <el-pagination @size-change="sizeChange"
4
      @current-change="currentChange"
5
      :current-page="currentPage"
6
      :page-sizes="propPageSizes"
7
      :page-size="pageSize"
8
      background
9
      layout="total, sizes, prev, pager, next, jumper"
10
      :total="total"
11
      v-if="total > 0">
12
    </el-pagination>
13
  </div>
14
</template>
15

16
<script>
17
export default {
18
  props: {
19
    callback: { // 获取列表数据方法
20
      type: Function,
21
      default() {
22
        return function() {};
23
      }
24
    },
25
    propCurrentPage: { // 当前页
26
      type: [Number],
27
      default: 1
28
    },
29
    propPageSizes: { // 配置每页显示多少条
30
      type: Array,
31
      default: function() {
32
        return [10, 20, 30];
33
      }
34
    },
35
    propPageSize: { // 默认每页显示条数
36
      type: [Number],
37
      default: 10
38
    },
39
    total: { // 数据总条数
40
      type: [Number],
41
      default: 0
42
    }
43
  },
44
  data() {
45
    return {
46
      currentPage: this.propCurrentPage, // 页面的当前页
47
      pageSize: this.propPageSize // 页面分页器大小
48
    };
49
  },
50
  methods: {
51
    // 改变当前页
52
    currentChange(val) {
53
      this.currentPage = val;
54
      this['callback']();
55
    },
56
    // 改变每页显示多少条
57
    sizeChange(val) {
58
      this.pageSize = val;
59
      this.currentPage = 1;
60
      this['callback']();
61
    }
62
  }
63
};
64
</script>
65

66
<style lang="less" scoped>
67
// 样式根据自己的实际情况修改，也可以用下边的
68
.pagination {
69
  margin-top: 20px;
70
  text-align: right;
71

72
  /deep/ .el-pagination.is-background .el-pager li,
73
  /deep/ .el-pagination.is-background .btn-prev,
74
  /deep/ .el-pagination.is-background .btn-next {
75
    color: #666;
76
    background-color: #fff;
77
    border: 1px solid #e4e9ec;
78
    border-radius: 4px;
79
  }
80

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

87
  /deep/ .el-pagination.is-background .btn-prev:disabled,
88
  /deep/ .el-pagination.is-background .btn-next:disabled {
89
    color: #c0c4cc;
90
  }
91
}
92
</style>

1
<Pagination
2
  ref="pagination"
3
  :callback="getMsgList"
4
  :total="total">
5
</Pagination>