reservation-ssr/components/common/page.vue

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

<script>
  export default {
    data () {
      return {
        nowPage: 1,
        currentPage: 1
      }
    },
    watch: {
      current: function () {
        this.nowPage = Number(this.current)
        this.currentPage = this.nowPage
      }
    },
    props: ['current', 'total', 'pageSize'],
    methods: {
      handleCurrentChange: function (changedPage) {
        if (this.nowPage !== this.currentPage) {
          this.$emit('childEvent', changedPage)
        }
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  .page-wrap{
    text-align: center;
    padding-top:25px;
    .el-pagination{
      height:30px;
    }
  }

</style>