ElementUI Pagination 分页 组件封装

组件封装

<template>
    <div class="pagination">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :hide-on-single-page="hideSinglePage"
            :total="paginationData.total"
            :current-page.sync="paginationData.currentPage"
            :page-size.sync="paginationData.pageSize"
            :page-sizes="[10, 20, 30, 40, 50]"
            :layout="layout">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name:'Pagination',
        props: {
            paginationData: {
                total: Number,
                currentPage: Number,
                pageSize: Number,
            },
            layout: {
                type: String,
                default: 'total, sizes, prev, pager, next, jumper'
            },
            hideSinglePage: {
                type: Boolean,
                default: false
            }
        },
        data(){
            return {

            }
        },
        mounted() {

        },
        methods: {
            /**
             * pageSize 改变时会触发事件
             * @param {Object} pageSize 每页显示条目个数
             */
            handleSizeChange(pageSize){
                this.$emit('size-change', pageSize);
            },
            /**
             * currentPage 改变时会触发事件
             * @param {Object} currentPage 当前页码
             */
            handleCurrentChange(currentPage){
                this.$emit('current-change', currentPage);
            },
        }
    }
</script>

<style lang="scss" scoped>
    .pagination{
        margin-top:30px;
        text-align: center;
    }
</style>

父组件调用

<template>
    <div class="container" v-loading="loading" element-loading-text="拼命加载中...">
        <pagination :paginationData="paginationData" @size-change="handleSizeChange" @current-change="handleCurrentChange"></pagination>
    </div>
</template>
<script>
    export default {
        name:'parent',
        components:{
            Pagination: () => import('@/components/Pagination/Pagination.vue')
        },
        data(){
            return {
                paginationData: {
                    total: 0,
                    currentPage: 1,
                    pageSize: 10,
                },
                tableData: [],
                loading: false
            }
        },
        mounted() {
            
        },
        methods: {
            /**
             * 查询表格数据
             * @param {Object} setFirstPage
             */
            getTableData(setFirstPage){
                this.loading = true;
                // 设置当前页为 1
                if(setFirstPage){
                    this.paginationData.currentPage = 1;
                }
                this.$axios.questionBank.getDoorProblemList({
                    likeName: this.searchInp,
                    creatorId: this.creater,
                    productId: this.allProduct,
                    startTime: this.startEndTime == null ? '' : this.startEndTime[0],
                    endTime: this.startEndTime == null ? '' : this.startEndTime[1],
                    pageNum: this.paginationData.currentPage,
                    pageSize: this.paginationData.pageSize
                }).then(res => {
                    this.paginationData.total = res.data.data.doorProblemList.total;
                    this.tableData = res.data.data.doorProblemList.list;
                    this.loading = false;
                })
            },
            /**
             * pageSize 改变时会触发事件
             * @param {Object} pageSize
             */
            handleSizeChange(pageSize){
              this.getTableData();
            },
            /**
             * currentPage 改变时会触发事件
             * @param {Object} currentPage
             */
            handleCurrentChange(currentPage){
                this.getTableData();
            },
            /**
             * 各类条件筛选
             */
            filter(){
                this.getTableData(true); // 筛选时，将当前页设置为 1
            },
            /**
             * 删除
             */
            delete(){
                this.$msgbox({
                    title: '提示',
                    message: `此操作将永久删除, 是否继续?`,
                    type: 'warning'
                }).then(() => {
                    this.$axios.templateConfig.delTemplate(row.id).then(res => {
                        if(res.data.data == '删除成功'){
                            this.$message.success('删除成功');
                        }else{
                            this.$message.error('删除失败');
                        }
                        // ***** 删除当前页最后一条数据，展示前一页数据 *****
                        if(this.paginationData.currentPage !== 1 && this.tableData.length == 1){
                            this.paginationData.currentPage--;
                        }
                        this.getTableData();
                    })
                }).catch(() => {
                    this.$message.info('已取消删除');
                });
            }
        }
    }
</script>