组件代码 

<template>
    <div style="">
    <el-pagination  
    @current-change="handleCurrentChange" 
    :current-page="Number(currentPage)" 
    :page-size="pageSize" 
    layout="total,  prev, pager, next, jumper" 
    :total="total" style="float:right;margin:15px 0px;">
    </el-pagination>
    </div>

</template>
<script type="text/ecmascript-6">
export default {
    components: {
 
    },
    data() {
        return {
            // page:2
        }
    },
    props:['pageSize','total','currentPage'],
    methods: {
        //每页展示条数
        handleSizeChange(val) {
            //事件传递
            this.$emit('handleSizeChangeSub', val);
        },
        //点击页
        handleCurrentChange(val) {
            //事件传递
            this.$emit('handleCurrentChangeSub', val);
        }
    },
    // 过滤器设计目的就是用于简单的文本转换
    filters: {},
    // 若要实现更复杂的数据变换，你应该使用计算属性
    computed: {
 
    },
    created() {
 
    },
    mounted() {},
    destroyed() {}
}
</script>
<style lang="scss" type="text/css" scoped>
</style>

页面引入

import pages from 'components/common/pages/pages'

components: {
　　pages
},

调用方法

 
        :total="clientList.total"  //总页数
        :page-size="clientList.per_page" //每页条数
        :current-page="clientList.current_page" 当前页面
        @handleCurrentChangeSub="handleCurrentChangeFun">

handleCurrentChangeFun(v) { //接收点击分页事件
    　　this.clientListPage = v; //当前页
        this.getClientList(); //获取列表
}

标签： element-ui 封装分页