Vue-Page（分页）

z组件代码：

<!-- 分页组件，使用说明见 README.md -->
<template>
    <div class='YxkPage'>
        <template v-if="pageObj.total">
            <el-pagination v-bind="dataBind(pageObj)" @current-change="changePage" v-on="this.$listeners">
            </el-pagination>
        </template>
    </div>
</template>

<script>
    export default {
        name: 'YxkPage',
        componentName: 'YxkPage',
        props: {
            pageObj: {
                type: Object
            }
        },
        components: {},
        data() {
            return {
                defaultAttrs: { // 默认分页属性
                    total: 0,
                    currentPage: 1,
                    'page-sizes': [20],
                    'page-size': 20,
                    layout: 'total, sizes, prev, pager, next, jumper'
                }
            }
        },
        methods: {
            dataBind(obj) {
                return Object.assign(this.defaultAttrs, obj)
            },
            changePage(page) {
                this.$emit('changePage', page)
            }
        },
        computed: {},
        watch: {},
        created() {},
        mounted() {}
    }
</script>

<style lang='scss'>
    .YxkPage {
        .el-pagination {
            padding: 20px;
            text-align: center;
            background: #fff;
        }
    }
</style>

示例：

 

 

 参数说明：