SOURCE

<template>
  <el-pagination v-bind="props" class="el-pagination--base" background v-model:current-page="modelCurrentPage" v-model:page-size="modelPageSize">
  </el-pagination>
</template>

<script setup>
import {ElPagination} from 'element-plus';
import {ref, toRefs, computed, nextTick} from 'vue';

defineOptions({
  inheritAttrs: false
});

const props = defineProps({
  ...ElPagination.props,
  currentPage: {
    type: Number,
    default: 1
  },
  pageSizes: {
    type: Array,
    default: [5, 10, 50, 100]
  },
  layout: {
    type: String,
    default: 'prev, pager, next, jumper'
    // 显示全的配置： 'total, sizes, prev, pager, next, jumper'
  }
});

const emits = defineEmits([...Object.keys(ElPagination.emits), 'update:currentPage', 'update:pageSize', 'currentPage', 'pageSizePage', 'paginationChange']);

const {currentPage, pageSize, defaultPageSize} = toRefs(props);

const modelCurrentPage = computed({
  get() {
    return currentPage.value;
  },
  set(newVal) {
    emits('update:currentPage', newVal);
    emits('currentPage', newVal);
    emits('paginationChange', {'currentPage': newVal, 'pageSize': modelPageSize.value});
  }
});

const modelPageSize = computed({
  get() {
    return pageSize.value || defaultPageSize.value;
  },
  set(newVal) {
    emits('update:pageSize', newVal);
    emits('pageSizePage', newVal);
    modelCurrentPage.value = 1;
  }
});
</script>

<style lang="scss">
.el-pagination--base {
  justify-content: flex-end;
}
</style>