vue3+element plus封装分页

<template>
  <div 
    class="pagination flex-center" 
    :style="{
      margin: props.margin
    }">
    <el-pagination 
      class="pagination-control" 
      background 
      layout="prev, pager, next, jumper" 
      :current-page="props.current" 
      :page-size="props.size" 
      :total="props.total" 
      @current-change="onChange" />
  </div>
</template>

js代码 

<script setup>
import {
  defineProps,
  defineEmits
} from 'vue';
let props = defineProps({
  margin: {
    type: String,
    default: ()=> '60px 0 0'
  },
  // 在第几页
  current: {
    type: Number,
    default: 1
  },
  // 一页显示多少条
  size: {
    type: Number,
    default: 9
  },
  // 总数据量
  total: {
    type: Number,
    default: 0
  }
});
let emits = defineEmits([
  'onChange'
]);

const onChange = page=> {
  console.log(`第${ page }页`)
  emits('onChange',page);
}

</script>

css

<style scoped>
.pagination-control /deep/ .btn-prev,
.pagination-control /deep/ .number,
.pagination-control /deep/ .btn-next,
.pagination-control /deep/ .el-pagination__editor {
  min-width: 44px!important;
  width: 44px!important;
  height: 44px!important;
  border-radius: 12px!important;
  background-color: #fff!important;
  font-size: 16px!important;
  color: #969696!important;
  overflow: hidden;
}
.pagination-control /deep/ .number.is-active {
  background-color: #12BCFF!important;
  font-weight: normal!important;
  color: #fff!important;
}
.pagination-control /deep/ .el-input__wrapper {
  box-shadow: none!important;
}
</style>

效果展示