ElementPlus之封装分页器

话不多说，直接上代码

1.首先先创建一个公共组件

<template>
  <div class="pagination">
    <el-pagination
      background
      :layout="layout"
      :pager-count="pagerCount"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      :total="pageTotal"
      v-model:currentPage="currentPages"
      @size-change="sizeChange"
      @current-change="current"
      @prev-click="prev"
      @next-click="next"
    ></el-pagination>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
const props = defineProps({
  pageTotal: {
    type: Number,
    default: 0, //总页数
  },
  pagerCount: {
    type: Number,
    default: 5, //如果页数很多大概展示的页码
  },
  layout: {
    type: String,
    default: "total,sizes, prev, pager, next, jumper, ->, slot",