先看效果

新建一个 Pagination.vue 文件

<template>
  <div :class="{'hidden':hidden}" class="pagination-container">
    <el-pagination
        :background="background"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :layout="layout"
        :page-sizes="pageSizes"
        :total="total"
        v-bind="$attrs"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({
  total: {
    required: true,
    type: Number
  },
  page: {
    type: Number,
    default: 1
  },
  limit: {
    type: Number,
    default: 20
  },
  pageSizes: {
    type: Array,
    default: () => [10, 20, 30, 50]
  },
  layout: {
    type: String,
    default: 'total, sizes, prev, pager, next, jumper'
  },
  background: {
    type: Boolean,
    default: true
  },
  hidden: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:page', 'update:limit', 'pagination'])

const currentPage = computed({
  get: () => props.page,
  set: (val) => emit('update:page', val)
})

const pageSize = computed({
  get: () => props.limit,
  set: (val) => emit('update:limit', val)
})

const handleSizeChange = (val) => {
  emit('pagination', { page: currentPage.value, limit: val })
}

const handleCurrentChange = (val) => {
  emit('pagination', { page: val, limit: pageSize.value })
}
</script>

<style scoped>
.pagination-container {
  background: #fff;
  padding: 32px 16px;
}
.pagination-container.hidden {
  display: none;
}
</style>

使用封装的代码

<Pagination
      :total="total"
      :page="page"
      :limit="pageSize"
      @update:page="page = $event"
      @update:limit="pageSize = $event"
      @pagination="handlePaginationChange"
    />

import Pagination from "@/components/Pagination/Pagination.vue";
const total = ref(100)
const page = ref(1)
const pageSize = ref(20)

const handlePaginationChange = ({ page, limit }) => {
  console.log('页码变化:', page, limit)
  // 这里可以发起API请求获取新数据
  fetchData(page, limit)
}

const fetchData = (page, limit) => {
  // 你的API请求逻辑
  console.log(`获取第${page}页数据，每页${limit}条`)
}

差不多就是这样了