vue分页 对el-pagination进行二次封装

分页组件Pagination

<template>
    <div class="container">
        <el-pagination
            style="margin-left: 20px; margin-top: 20px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="pageSizes"
            :page-size="100"
            :layout="layout"
            :total="total"
        >
        </el-pagination>
    </div>
</template>

<script>
export default {
    name: "Pagination",
    props: {
        total: {
            required: true,
            type: Number,
        },
        page: {
            type: Number,
            default: 1,
        },
        per_page: {
            type: Number,
            default: 20,
        },
        pageSizes: {
            type: Array,
            default() {
                return [10, 20, 30, 50];
            },
        },
        layout: {
            type: String,
            default: "total, sizes, prev, pager, next, jumper",
        },
        hidden: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        currentPage: {
            get() {
                return this.page;
            },
            set(val) {
                this.$emit("update:page", val);
            },
        },
        pageSize: {
            get() {
                return this.limit;
            },
            set(val) {
                this.$emit("update:limit", val);
            },
        },
    },
    methods: {
        handleSizeChange(sizeChange) {
            console.log("每页条数", sizeChange);
            this.$emit("handleSizeChange", sizeChange);
        },
        handleCurrentChange(currentPage) {
            console.log("当前页2", currentPage);
            this.$emit("handleCurrentChange", currentPage);
        },
    },
};
</script>

<style scoped>
.pagination-container {
    background: #fff;
    padding: 32px 16px;
}
.container{
    display: flex;
    flex-direction: row;
    /* justify-content: center; */
}
</style>

在分页数据中进行引入使用

<Pagination
    :total="total"
     :pageSizes="[10, 15, 20, 50]"
     :page="page.page"
     :per_page="page.per_page"
     :layout="`total, sizes, prev, pager, next, jumper`"
     @handleSizeChange="handleSizeChange"
     @handleCurrentChange="handleCurrentChange"
     class="pagination"
 >
 </Pagination>
 
        

data中page对象

data(){
	retrun{
	page: {
            page: 1,
            per_page: 10,
        },
	}
}

调用的子组件方法

handleSizeChange(sizeChange) {
    console.log(sizeChange);
    this.page.per_page = sizeChange;
    this.getScheduleList(this.newSearchForm);
},
handleCurrentChange(currentPage) {
    console.log(currentPage);
    this.page.page = currentPage;
    this.getScheduleList(this.newSearchForm);
},