项目概要
由于近期开发的后台管理系统大部分的页面都存在分页功能,且样式统一。
于是打算封装一个公共的分页组件。
注:项目采用最新的 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 = () => {
// 函数内具体处理逻辑
...
}
具体的封装和使用方法就到这里了。有什么不清楚的可以留言,我们一起探讨学习!