portal/src/views/management/weikezhizuo/components/Pagination.vue

<template>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="page"
            :page-sizes="pageSizes"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</template>

<script>
    export default {
        name:     'Pagination',
        props:    {
            pageSizes: {
                type:    Array,
                default: () => [],
            },
            codePage: {
                type: String,
                default: 'page'
            },
            codeSize: {
                type: String,
                default: 'size'
            },
            codeTotal: {
                type: String,
                default: 'total'
            }
        },
        inject:   {
            paginationServiceData: {
                type:    Object,
                default: () => {
                },
            },
            tableServiceData: {
                type:    Object,
                default: () => {
                },
            },
        },
        computed: {
            page:  {
                get() {
                    return this.paginationServiceData[this.codePage];
                },
                set(val) {
                    this.paginationServiceData[this.codePage] = val;
                },
            },
            size:  {
                get() {
                    return this.paginationServiceData[this.codeSize];
                },
                set(val) {
                    this.paginationServiceData[this.codeSize] = val;
                },
            },
            total: {
                get() {
                    return this.paginationServiceData[this.codeTotal];
                },
                set(val) {
                    this.this.paginationServiceData[this.codeTotal] = val;
                },
            },
        },
        watch:    {
            total(newVal) {
                if (newVal >= this.size && !this.tableServiceData.myData.length && this.page > 1) {
                    this.page--;
                    this.$emit('current-page', this.page);
                }
            },
        },
        methods:  {
            handleSizeChange(val) {
                this.$emit('size-change', val);
            },
            handleCurrentChange(val) {
                this.$emit('current-page', val);
            },
        },
    };
</script>

<style scoped>

</style>