组件

src/components/Pagination/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <div v-show="total > 0" class="pagination-container">
+    <el-pagination
+      small
+      :current-page.sync="currentPage"
+      :page-size.sync="pageSize"
+      :layout="layout"
+      :page-sizes="pageSizes"
+      :total="total"
+      v-bind="$attrs"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Pagination',
+  props: {
+    total: {
+      required: true,
+      type: Number
+    },
+    page: {
+      type: Number,
+      default: 1
+    },
+    limit: {
+      type: Number,
+      default: 20
+    },
+    pageSizes: {
+      type: Array,
+      default() {
+        return [10, 20, 30, 50]
+      }
+    },
+    layout: {
+      type: String,
+      default: 'total, sizes, prev, pager, next, jumper'
+    }
+  },
+  computed: {
+    currentPage: {
+      get() {
+        return this.page
+      },
+      set(val) {
+        this.$emit('update:page', val)
+      }
+    },
+    pageSize: {
+      get() {
+        return this.limit
+      },
+      set(val) {
+        this.$emit('update:limit', val)
+      }
+    }
+  },
+  methods: {
+    handleSizeChange(val) {
+      this.$emit('pagination', { page: this.currentPage, limit: val })
+    },
+    handleCurrentChange(val) {
+      this.$emit('pagination', { current: val, limit: this.pageSize })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pagination-container {
+  background: #fff;
+  padding-top: 20px;
+  text-align: right;
+}
+</style>
+<style lang='scss'>
+.pagination-container {
+  .el-pagination {
+    position: relative;
+  }
+
+  .el-pagination__jump {
+    margin-left: 125px;
+  }
+
+  .el-pagination__sizes {
+    position: absolute;
+    right: 100px;
+  }
+
+  .el-pager li.active {
+    background-color: #0b58ff;
+    color: #fff;
+  }
+
+  .el-input--mini .el-input__inner {
+    height: 22px;
+  }
+}
+</style>