在components文件夹新建一个pagination.vue
<template>
<div class="">
<el-pagination
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="pageSizes"
small
background
:layout="layout"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script setup>
import { computed } from 'vue'
const emit = defineEmits([
'update:page_no',
'update:page_size',
'update:getData',
])
const props = defineProps({
//页码
page_no: {
type: Number,
default: 1,
},
//每页条数
page_size: {
type: Number,
default: 10,
},
total: {
type: Number,
default: 0,
},
pageSizes: {
type: Array,
default: () => [10, 20, 30, 50],
},
layout: {
type: String,
default: 'total, sizes, prev, pager, next, jumper',
},
})
const currentPage = computed({
get: () => {
return props.page_no
},
set: (val) => {
emit('update:page_no', val)
},
})
const pageSize = computed({
get: () => {
return props.page_size
},
set: (val) => {
emit('update:page_size', val)
},
})
//每页条数
const handleSizeChange = (val) => {
emit('update:getData', { page_no: currentPage.value, page_size: val })
}
//页码
const handleCurrentChange = (val) => {
emit('update:getData', { page_no: val, page_size: pageSize.value })
}
</script>
<style lang="scss" scoped></style>
将pagination.vue全局注册在main.js中
//全局分页组件
import Pagination from '@/components/pagination.vue'
const app = createApp(App);
app.component('Pagination', Pagination)
全局注册后直接在父组件上使用
<Pagination
v-model:page_no="params.page_no"
v-model:page_size="params.page_size"
@update:getData="getData"
:pageSizes="[10, 20, 30, 50]"
:total="total"
>
</Pagination>
<script setup>
const params = reactive({
//页码
page_no: 1,
//每页条数
page_size: 10,
})
//总条数
const total = ref(0)
function getData (){
//后续逻辑......
}
</script>