封装 element 分页组件

<template>
    <div class="flex-pe padding-top15">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentPageChange"
            :current-page="pageInfo.pageNum"
            :page-sizes="[10, 20, 50, 200]"
            :page-size="pageInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageInfo.totalCount"
        >
        </el-pagination>
    </div>
</template>
<script>
export default {
    data() {
        return {};
    },
    props: {
        pageInfo: {
            type: Object,
            default: () => {
                return {
                    pageNum: 1,
                    pageSize: 10,
                    totalCount: 0,
                };
            },
        },
    },
    methods: {
        handleCurrentPageChange(val) {
            this.$emit('onPageChange', val);
        },
        handleSizeChange(val) {
            this.$emit('onSizeChange', val);
        },
    },
};
</script>
<style lang="scss" scoped>
.pagination-box {
    padding-bottom: 15px;
}
</style>

在components/common 文件下创建 Pagination.vue 在页面调用时直接引入即可

import Pagination from '@components/common/Pagination.vue';

 components: {
     Pagination
},
// data中设置默认值
 pageInfo: {
       pageNum: 1,
       pageSize: 10,
       totalCount: 0,
}

使用

 //分页事件 页码
        handleCurrentPageChange(newPage) {
            this.pageInfo.pageNum = newPage;
            this.getList(this.pageInfo);
        },
        //分页事件 条数
        handleSizeChange(newSize) {
            this.pageInfo.pageNum = 1;
            this.pageInfo.pageSize = newSize;
            this.getList(this.pageInfo);
        },