operation-Backend/src/components/PaginationWrapper/index.vue

<template>
  <div class="pad-1">
    <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[20, 40, 60, 80]" :total="total"
      :size="size" @size-change="handleSizeChange" @current-change="handlePageChange"
      layout="total, sizes, prev, pager, next" :disabled="disabled" :background="background" />
  </div>

</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue';
import { ElPagination } from 'element-plus';
import type { ComponentSize } from 'element-plus'
interface Props {
  pageNum: number;
  pageSize: number;
  total: number;

}
const background = ref(false)
const disabled = ref(false)
const size = ref<ComponentSize>('small')
const props = defineProps<Props>();
const emit = defineEmits(['pageChange','sizeChange']);

const currentPage = ref(props.pageNum);
const pageSize = ref(props.pageSize);
const total = props.total;
const handlePageChange = (newPage: number) => {
  currentPage.value = newPage;
  emit('pageChange', newPage);
};
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  emit('sizeChange', val);

};

</script>