el-pagination组件封装

news2025/10/31 16:19:07

组件使用

在这里插入图片描述
源代码：

<script setup>
import Pagination from '@/components/pagination/index.vue'
import {ref} from "vue";

const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(120)

function loadData() {
  // 加载数据
}
</script>

<template>
  <Pagination v-model:page-num="pageNum"
              v-model:page-size="pageSize"
              :total="total"
              @loadData="loadData"
  />
</template>

<style lang="scss" scoped>
</style>

组件属性

名称	类型	默认值	是否必需	说明
pageNum	Number	1	是	v-model:pageNum双向绑定属性,
pageSize	Number	10	是	v-model:pageSize双向绑定属性
pagerCount	Number	5	否	需要显示的页码号数量
pageSizes	Array	[5,10,15,20]	否	每页的大小
layout	String	‘’	否	prev, pager, next, jumper,total,sizes布局
total	Number	0	是	总条数

组件事件

名称	参数列表	说明
loadData	无	加载分页数据

第三方

// npm install @vueuse/core@11.1.0
import {useDebounceFn} from "@vueuse/core";

外部常量

export const Constants = {
    // xs 屏幕宽度(单位：px)
    XS_WIDTH: 768,
}

外部函数

// 获取浏览器窗口宽度
export function getClientWidth(){
    return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
}

组件源码：

<script setup>
import {computed, onMounted, ref, watch} from "vue";
import {getClientWidth} from "@/util/system.js";
import {Constants} from "@/setting.js";
import {useDebounceFn} from "@vueuse/core";

const emit = defineEmits(['loadData', 'update:pageNum', 'update:pageSize'])
const prop = defineProps({
  pageNum: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 10
  },
  pagerCount: {
    type: Number,
    default: 5
  },
  pageSizes: {
    type: Array,
    default: [5, 10, 15, 20]
  },
  layout: {
    type: String,
    default: ''
  },
  total: {
    type: Number,
    default: 0
  }
})

// 窗口宽度
const clientWidth = ref(getClientWidth())

// 窗口大小改变回调
function handleClientWidth() {
  clientWidth.value = getClientWidth()
}

const pageNum1 = ref(prop.pageNum)
const pageSize1 = ref(prop.pageSize)
const pagerCount1 = computed(() => prop.pagerCount)
const pageSizes1 = computed(() => prop.pageSizes)
const layout1 = computed(() => {
  if (!prop.layout) {
    // 可视宽度是否小于768px
    return clientWidth.value < Constants.XS_WIDTH ? 'prev, pager, next, total' : 'prev, pager, next, jumper,total,sizes'
  } else {
    return prop.layout
  }
})
const total1 = computed(() => prop.total)

// 监听pageNum和pageSize的变化
watch([pageNum1, pageSize1], ([newPageNum, newPageSize]) => {
  emit('update:pageNum', newPageNum)
  emit('update:pageSize', newPageSize)
  // 节流函数，加载新数据
  loadData()
})

// 防抖函数，处理页大小改变导致页号改变，连续发送两次请求的情况
const loadData = useDebounceFn(() => {
  emit('loadData')
}, 800)

onMounted(() => {
  window.addEventListener("resize", handleClientWidth)
})
</script>
<template>
  <el-pagination
      v-model:current-page="pageNum1"
      v-model:page-size="pageSize1"
      :page-sizes="pageSizes1"
      :layout="layout1"
      :pager-count="pagerCount1"
      :total="total1"
      hide-on-single-page
  />
</template>

<style lang="scss" scoped>

</style>