二次封装el-pagination分页器

直接引入el-pagination使用时个人觉得每页都需要写一个页码以及页数切换的函数有点繁琐，为了方便将组件以及方法封装起来使用更加方便了。以下是代码实例：

1.新建封装分页方法文件page.js

const initData = {
    page: 1,
    pageSize: 10,
    total: 0
}

const handlePage = (type, val, ctx, fn) => {
    if (ctx?.total === 0) return
    if (type === 'pageSize') {
        ctx.pageSize = val
    } else {
        ctx.page = val
    }
    fn?.()
}

export const usePage = init => {
    return [
        init || initData,
        handlePage
    ]
}

2.新建my-pagination.vue

<template>
    <div class="pagination" :style="`text-align: ${textAlign};`">
        <el-pagination
            @size-change="val => $emit('updatePage', 'pageSize', val)"
            @current-change="val => $emit('updatePage', 'page', val)"
            :current-page="page"
            :page-sizes="pageSizeList"
            :page-size="pageSize"
            :layout="layout"
            :total="total"
        />
    </div>
</template>

<script>
    export default {
        name: 'Pagination',
        props: {
            total: {
                type: Number,
                default: 0
            },
            page: {
                type: Number,
                default: 1
            },
            pageSize: {
                type: Number,
                default: 10
            },
            pageSizeList: {
                type: Array,
                default: () => [10, 30, 50]
            },
            layout: {
                type: String,
                default: 'prev, pager, next, jumper, total, sizes'
            },
            textAlign: {
                type: String,
                default: 'left'
            }
        }
    }
</script>

<style scoped lang="scss">
    .pagination{
        margin-top: 15px;
        /deep/ .el-pagination__jump{
            margin: 0 10px;
        }
    }
</style>

3.引入my-pagination.vue并且注册,引入page.js

4.使用组件

<template>
    <div class="">
        <my-pagination
            :page="page"
            :page-size="pageSize"
            :total="total"
            @updatePage="Page"
        />
    </div>
</template>

<script>
import { usePage } from '@/utils/page'
import myPagination from './my-pagination.vue'

const [pageData, setPage] = usePage()
export default {
    components:{
        myPagination,
    },
    data () {
        return {
            ...pageData,
        }
    },
    methods: {
        // 分页处理函数
        Page (type, val) {
            setPage(type, val, this, this.getList)
        },
        // 获取数据
        async getList () {
            try {
                
            } catch (e) {
                this.$message.error(e.message)
            } finally {
            }
        },
    },
    mounted () {
        this.getList()
    }
}
</script>

<style lang="scss" scoped>

</style>