vue2 Pagination 分页组件

vue2 Pagination 分页组件

Pagination.vue

<template>
    <div class="page-wrap">
        <el-pagination
            background
            :layout="layout"
            :total="total"
            :page-size="size"
            :page-sizes="pageSizes"
            :current-page="currentPage"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </div>
</template>

<script>

export default {
    name: 'Pagination',
    components: {},
    props: {
        total: {
            type: Number,
            default: 0
        },
        layout: {
            type: String,
            default: 'total, prev, pager, next, sizes, jumper'
        },
        currentPage: {
            type: Number,
            default: 1
        },
        size: {
            type: Number,
            default: 20
        },
        pageSizes: {
            type: Array,
            default: () => {
                return [20, 50, 100];
            }
        },
        handleSizeChange: {
            type: Function,
            default: new Function()
        },
        handleCurrentChange: {
            type: Function,
            default: new Function()
        }
    },
    data() {
        return {
        };
    },
    mounted() {
        let pageText = document.getElementsByClassName('el-pagination__jump')[0];
        if (pageText) { // 可能存在不显示页码的情况，所以最好判断一下避免报错~
            pageText.childNodes[0].nodeValue = '跳至';
        }
    },
    methods: {}
};

</script>
<style  lang="scss" scoped>
.page-wrap {
	display: flex;
	justify-content: end;
	padding-right: 24px;
	background: #ffffff;

	::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
		background: #FFFFFF;
		color: #2469F1;
		border-radius: 2px;
		border: 1px solid #2469F1;
	}
}
</style>

使用

        <Pagination
            class="pagination"
            :total="pages.total"
            :size="pages.pageSize"
            :current-page="pages.pageNum"
            :handle-size-change="handleSizeChange"
            :handle-current-change="handleCurrentChange"
        />

            pages: {
                total: 0,
                pageNum: 1, // 当前页码
                pageSize: 20 // 每页显示条目个数不传默认20,
            },

        // 分页
        handleSizeChange(val) {
            this.pages.pageNum = 1;
            this.pages.pageSize = val;
            this.initTable({
                sizeOrder: this.sizeOrder,
                expiredOrder: this.expiredOrder
            });
        },
        handleCurrentChange(val) {
            this.pages.pageNum = val;
            this.initTable({
                sizeOrder: this.sizeOrder,
                expiredOrder: this.expiredOrder
            });
        }

效果