封装组件——pageInfo分页（vue+element）

<template>
  <div class="page">
    <el-pagination v-if="show"
                   :small="small"
                   background
                   :page-size="pageSize"
                   :total="total"
                   :layout="layout"
                   :current-page="currentPage"
                   :page-sizes="[5,10,15,20,25,30]"
                   @size-change="SizeChange"
                   @current-change="currentChange">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "pageinfo",
  props: {
    immediate: {
      type: Boolean,
      default: true,
    },

    small: {
      type: Boolean,
      default: false,
    },
    total: {
      type: Number,
      default: 0,
    },
    page: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    layout: {
      type: String,
      default: "total, prev, pager, next",
    },
    hideOnSinglePage: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      show: true,
      currentPage: 1,
      currentPageSize: 10,
    };
  },
  methods: {
    currentChange(page) {
      this.currentPage = page;
      this.$emit("getDataList", this.currentPage, this.currentPageSize);
    },
    SizeChange(pageSize) {
      (this.currentPageSize = pageSize),
        this.$emit("getDataList", this.currentPage, this.currentPageSize);
    },
    refresh() {
      this.$emit("getDataList", this.currentPage, this.pageSize);
    },
  },

  async mounted() {
    if (this.immediate) {
      await this.refresh();
    }
  },
  watch: {
    page(nval) {
      this.currentPage = nval;
    },
  },
};
</script>

<style scoped>
.page {
  width: 100%;
  text-align: right;
}
</style>