<!-- 分页组件封装 -->
<template>
    <div class="page-box">
        <el-pagination 
            background
            layout="total, prev, pager, next, sizes, jumper"
            v-model:current-page="curr"
            v-model:page-size="size"
            :total="total"
            :page-sizes="sizes || [1, 10, 20, 30, 40, 50, 100]"
            @current-change="changePage()"
            @size-change="changePage()">
        </el-pagination>
    </div>
</template>

<script setup name="com-page">
import {getCurrentInstance} from "vue";
const { proxy } = getCurrentInstance();


defineProps({
    // 当前页 
    curr: {}, 
    // 页大小 
    size: {}, 
    // 数据总数
    total: {},
    // 页大小合集
    sizes: {}
})

// 刷新分页 
const changePage = function() {
    proxy.$emit('update:curr', proxy.curr);
    proxy.$emit('update:size', proxy.size);
    proxy.$emit('change');
};

</script>

<style scoped>

</style>
