Vue3+Element Plus+TS 项目利用 el-pagination 封装公共的分页组件

项目概要

由于近期开发的后台管理系统大部分的页面都存在分页功能，且样式统一。
于是打算封装一个公共的分页组件。

注：项目采用最新的 Vue3 setup 语法糖

效果展示

封装前

封装后

代码实现

Pagination.vue 子组件

<template>
  <div>
    <el-pagination
      v-if="total > 0"
      class="flex justify-end"
      :background="background"
      :pager-count="pagerCount"
      layout="total, sizes, prev, pager, next, jumper"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :total="total"
    />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = withDefaults(
  defineProps<{
    page?: number
    size?: number
    total?: number
    pagerCount?: number
    background?: boolean
  }>(),
  {
    page: 1,
    size: 10,
    total: 0,
    pagerCount: 5,
    background: true
  }
)
const emit = defineEmits(['update:page', 'update:size', 'change'])
const currentPage = computed({
  get: () => {
    return props.page
  },
  set: (val: number) => {
    emit('update:page', val)
    emit('change')
  }
})
const pageSize = computed({
  get: () => {
    return props.size
  },
  set: (val: number) => {
    emit('update:page', 1)
    emit('update:size', val)
    emit('change')
  }
})
</script>

注意：根据 element plus 官方描述 @size-change 和 @current-change 将在未来移除，因此不再使用这两个方法，将使用最新的 v-model 进行绑定

将 Pagination.vue 全局注册在 main.ts

import Pagination from '@/components/Pagination/index.vue'

const app = createApp(App)

app.component('Pagination', Pagination)

在父组件引用

// 全局注册不再需要 import
<Pagination 
	:total="pagination.total" 
	v-model:page="pagination.page"
	v-model:size="pagination.size"
	@change="initData"
 />
	
<script setup lang="ts">
import { ref } from "vue"

const pagination = ref({
  page: 1,
  size: 10,
  total: 0
})

const initData = () => {
	// 函数内具体处理逻辑
	...
}

具体的封装和使用方法就到这里了。有什么不清楚的可以留言，我们一起探讨学习！