portal/src/views/management/YouQingLianJie/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>
    import { paginationServiceData, defaultPageSizes } from './paginationData';

    export default {
        name:     'Pagination',
        props:    {
            pageSizes: {
                type:    Array,
                default: () => defaultPageSizes,
            },
        },
        inject:   {
            tableServiceData: {
                type:    Object,
                default: () => {
                },
            },
        },
        computed: {
            page:  {
                get() {
                    return paginationServiceData.page;
                },
                set(val) {
                    paginationServiceData.page = val;
                },
            },
            size:  {
                get() {
                    return paginationServiceData.size;
                },
                set(val) {
                    paginationServiceData.size = val;
                },
            },
            total: {
                get() {
                    return paginationServiceData.total;
                },
                set(val) {
                    this.paginationServiceData.total = 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>