fe-manage/src/components/Pagination.vue

<template>
  <a-pagination
    :showSizeChanger="showSizeChanger"
    :showQuickJumper="showQuickJumper"
    :hideOnSinglePage="hideOnSinglePage"
    :pageSizeOptions="pageSizeOptions"
    :pageSize="pageSize"
    :current="page"
    :total="total"
    @change="changePagination"
  />
</template>
<script setup>
import { defineProps, defineEmits } from "vue";
const props = defineProps({
  total: {
    type: Number,
    default: 0,
  },
  pageSize: {
    type: Number,
    default: 10,
  },
  page: {
    type: Number,
    default: 1,
  },
  showSizeChanger: {
    type: Boolean,
    default: true,
  },
  showQuickJumper: {
    type: Boolean,
    default: true,
  },
  hideOnSinglePage: {
    type: Boolean,
    default: false,
  },
  pageSizeOptions:{
    type:Array,
    default:["10","20","50","100"]
  }
});
const emit = defineEmits(["changePagination"]);
const changePagination = (page, pageSize) =>{
    emit("changePagination", page, pageSize);
}
</script>
<style scoped></style>