关于javascript:组件封装二次封装elpagination拒绝繁琐配置

el-pagination 分页组件

在中后盾零碎中，常常会应用分页器组件。el-pagination 须要配置
page-size、layout、@current-change 等诸多属性。每个页面都这样子应用的话既容易呈现谬误，也会造成代码冗余

组件设计（完整版）

p-el-pagination 默认的属性，如 background、small、page-sizes 等，请依据理论业务批改默认值

调用成果及代码

<!--
 * @Date: 2022-05-11 14:38:32
 * @Author: surewinT 840325271@qq.com
 * @LastEditTime: 2022-05-11 14:50:41
 * @LastEditors: surewinT 840325271@qq.com
 * @Description:
-->

<template>
    <div class="">
        <p-el-pagination
            :total="total"
            :size="100"
            @handlePageSizeChange="handlePageSizeChange"
        />
    </div>
</template>

<script>
import Pagination from './p-el-pagination.vue';
export default {
    components: {'p-el-pagination': Pagination,},
    props: [],
    data() {
        return {total: 500,};
    },
    mounted() {},
    watch: {},
    methods: {handlePageSizeChange(page, size) {console.log('分页器变动：', page, size);
        },
    },
};
</script>

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

组件源码（p-el-checkbox.vue）

<!--
 * @Date: 2021-09-27 17:17:18
 * @Author: surewinT 840325271@qq.com
 * @LastEditTime: 2022-05-11 14:50:49
 * @LastEditors: surewinT 840325271@qq.com
 * @Description: 分页器组件
-->

<template>
    <div class=""style="text-align: center">
        <el-pagination
            @size-change="sizeChange"
            @current-change="pageChange"
            :current-page="currentPage"
            :page-sizes="[30, 50, 100, 200, 500]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
            small
        >
        </el-pagination>
    </div>
</template>

<script>
export default {components: {},
    props: {
        total: {
            type: Number,
            default: 0,
        },
        size: {
            type: Number,
            default: 30,
        },
        page: {
            type: Number,
            default: 1,
        },
    },
    data() {
        return {
            currentPage: 1,
            currentsize: 30,
        };
    },
    mounted() {
        this.currentsize = this.size;
        this.currentPage = this.page;
    },
    watch: {size() {this.currentsize = this.size;},
        page() {this.currentPage = this.page;},
    },
    methods: {sizeChange(val) {
            this.currentsize = val;
            // size 变动时，默认定位到第一页
            this.currentPage = 1;
            this.$emit(
                'handlePageSizeChange',
                this.currentPage,
                this.currentsize
            );
        },
        pageChange(val) {
            this.currentPage = val;
            this.$emit(
                'handlePageSizeChange',
                this.currentPage,
                this.currentsize
            );
        },
    },
};
</script>

<style lang='scss' scoped>
::v-deep {
    .el-input__inner {height: 25px;}
}
</style>

仓库源码

后续补充