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

<script>
export default {
    name:'page',
    data() {
        return {
            currentPage: 1,
        }
    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
    }
}
</script>

<style lang="less" scoped>
.el-pagination {
    position: absolute;
    width: 200px;
    top: 10px;
    right: 350px;

    /deep/.el-pagination__jump {
        margin-left: 0;
    }

    /deep/.btn-prev {
        border-radius: 5px;
    }

    /deep/.btn-next {
        border-radius: 5px;
    }

    /deep/ .el-pager li {
        border-radius: 5px;
    }

}
</style>