eep_page/src/components/PaginationPage.vue

<template>
  <el-pagination
    background
    :current-page="cur_page"
    :page-sizes="[10, 20, 30, 40, 50]"
    :page-size="page_capacity"
    :pager-count="pagerCount"
    layout="total, prev, pager, next, sizes, jumper"
    :total="total"
    @prev-click="changePage"
    @next-click="changePage"
    @current-change="changePage"
    @size-change="changePageSize"
  />
</template>

<script>
export default {
  name: 'PaginationPage',
  props: {
    pageSize: {
      type: Number,
      default: 10,
    },
    total: {
      type: Number,
      required: true,
    },
    pagerCount: {
      type: Number,
      default: 7,
    },
  },
  data() {
    return {
      cur_page: 1,
      page_capacity: this.pageSize,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    changePage(number) {
      this.cur_page = number;
      this.getList();
    },
    changePageSize(size) {
      this.page_capacity = size;
      this.getList();
    },
    getList() {
      this.$emit('getList', { cur_page: this.cur_page, page_capacity: this.page_capacity });
    },
  },
};
</script>