clientManageSystem/src/baseComponents/Pagination.vue

<template>
    <div class="page_pagination" v-if="!(hidePagination)">
        <div class="pagination_desc">
            <slot name="paginationDesc"></slot>
        </div>
        <el-pagination 
        :hide-on-single-page="props.hidesinglePage"
        :current-page="props.currentPage" 
        :page-size="props.pageSize" 
        :page-sizes="[20, 50, 100]" 
        background 
        :layout="(showPageSize ? 'sizes,' : '') + 'prev, pager, next'" 
        :total="Number(props.totalNum)" 
        @current-change="(val)=>emit('paginationChange',{type:'currentPage',val})" 
        @size-change="(val)=>emit('paginationChange',{type:'pageSize',val})" />
    </div>
</template>


<script setup lang="ts">
const props = defineProps({
    hidesinglePage:{
        type:Boolean,
    },
    hidePagination:{
        type:Boolean,
        default:false
    },
    currentPage:{
        type:Number,
        default:1
    },
    showPageSize:{
        type:Boolean,
        default:false
    },
    pageSize:{
        type:Number,
        default:20
    },
    totalNum:{
        type:Number,
        default:0
    },
})

const emit = defineEmits(['paginationChange'])



</script>




<style lang="scss" scoped>
.pagination_desc{
  flex:1 1;
  color: #666;
  font-size: 14px;
}
</style>