Element + Vue之封装的分页组件

调用该组件需要传以下几个参数

1. 一种是数据量少的时候，后端将全部数据给到你，你来进行分页功能 需要将全部数据传过来 pageData
2. 进行选择设置每页条数 pageCurrent
3. 每页显示的条数 pagesize
4. 页码 b_current
5. 后台写分页功能的时候，需要给你传过来数据的总条数，用于展示和计算数据条数和当前页数的计算 total

<template>
    <div class="block">
        <div class="page-desc">共{{total?total:pageData.length}}条记录 第{{current}}/{{toatPage}}页</div>
        <div class="block-page">
            <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"        
            :page-sizes="pageCurrent"
            :page-size="pageSizes"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total?total:pageData.length"
            @prev-click="prevClick"
            @next-click="nextClick">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    name: 'page',
    props: ['pageData','pageCurrent','pagesize','b_current','total'],
    data(){
        return {
            pageSizes: this.pagesize,          // 每页显示条数
            current:   this.b_current          // 页码
        }
    },
    computed: {
    	// 计算总页数
        toatPage(){
            if(this.total) {
                let totalPage=Math.ceil(this.total/this.pageSizes);
                return totalPage
            }else {
                let totalPage=Math.ceil(this.pageData.length/this.pageSizes);
                return totalPage
            }
        }
    },
    methods:{
        handleSizeChange(val) {         // 显示条数改变时触发
            this.pageSizes = val
        },
        handleCurrentChange(val) {      // 页码变化时触发
            this.current = val
        },
        // 上一页
        prevClick(){
            this.current=this.current-1
            this.$emit('getargument',{pagesize: this.pageSizes,current: this.current})
        },
        // 下一页
        nextClick(){
            this.current=this.current+1
            this.$emit('getargument',{pagesize: this.pageSizes,current: this.current})
        }
    },
    created(){
        this.$emit('getargument',{pagesize: this.pageSizes,current: this.current})
    },
    watch: {
    	// 监听调整条数、页码、每页展示条数的变化，并将改变后的值返回给父组件
        pageSizes(val){
            this.$emit('getargument',{pagesize: this.pageSizes,current: this.current})
        },
        current(val){
            this.$emit('getargument',{pagesize: this.pageSizes,current: this.current})
        },
        b_current(val) {
            this.current = val
        }
    },
    
}
</script>

<style lang="less" scoped>
/* 设置分页组件的一些响应式问题 */
.block {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    
    .page-desc {
        margin-top: 20px;
        height: 28px;
        line-height: 28px;
        font-size: 12px;
        vertical-align: top;
        color: #606266;
    }
}
.el-pagination {
    margin-top: 20px;
    text-align: right;
    display: flex;
    flex-wrap: wrap;
}
/deep/.el-pager {
    display: flex;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .block-page {
        width: 100%;
        
    }
    .el-pagination {
        text-align: left;
    }
    .page-desc {
        width: 100%;
        padding: 0 10px;
    }
    /deep/.el-pagination__sizes {
        display: block !important;
        width: 100% !important;
        margin-bottom: 20px;
    }
    
}
@media (max-width: 820px) {
    /deep/.el-pagination__total {
        display: none !important;
    }
    
}
@media (max-width: 450px) {
    /deep/.el-pagination__jump {
        display: block !important;
        width: 100% !important;
        margin-top: 20px;
    }
    /deep/.el-message-box {
        width: 73% !important;
    }
}
</style>

调用该组件

<page :pageData="keywordListData" :pageCurrent = "[10,20,50,100]" :total="total" :pagesize="pageSize" :b_current="b_current" v-on:getargument="getargument" />

v-on:getargument 接收组件返回的值