<template>
    <div>
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
            :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
            :total="realTotal" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>

<script>
import { ref, onMounted } from 'vue';
export default {
    props: {
        total: {
            type: Number,
            required: true
        }
    },
    setup(props, { emit }) {
        let realTotal = props.total
        let currentPage = ref(1)
        let pageSize = ref(10)
        let small = ref(false)
        let background = ref(false)
        let disabled = ref(false)
        function handleSizeChange(val) {
            console.log(`${val} items per page`)
        }
        function handleCurrentChange(val) {
            console.log(`current page: ${val}`)
        }
        return {
            currentPage,
            pageSize,
            small,
            background,
            disabled,
            handleSizeChange,
            handleCurrentChange,
            realTotal,
        }
    }
}
</script>

<style lang="scss" scoped></style>