vue-cli项目中分页组件封装

为了方便理解整个组件代码都在这
组件部分

<template>
    <div class="select" v-if="size>limit">
      <el-pagination
        layout="prev, pager, next"
        prev-text="上一页"
        next-text="下一页"
        @current-change="goindex"
        :current-page="index"
        :page-size="limit"
        :total="size">
      </el-pagination>
    </div>
</template>

<script>
export default {
    name : 'pagination',
    //通过props来接受从父组件传递过来的值
    props : {
        //页面中的可见页码，其他的以...替代, 必须是奇数
        perPages : {
            type : Number,
            default : 5
        },
        //当前页码
        pageIndex : {
            type : Number,
            default : 1
        },
        //每页显示条数
        pageSize : {
            type : Number,
            default : 10
        },
        //总记录数
        total : {
            type : Number,
            default : 1
        }
    },
    methods : {
        goindex(val) {
            console.log(val)
             if (this.index !== val) {
                this.index = val
                //父组件通过change方法来接受当前的页码
                this.$emit('change', this.index)
            }else{
                this.index = val;
            }     
        },
    },
    computed : {
    },
    data () {
        this.total
        return {
            index : this.pageIndex, //当前页码
            limit : this.pageSize, //每页显示条数
            size : this.total || 1, //总记录数
            showPrevMore : false,
            showNextMore : false
        }
    },
    watch : {
        pageIndex(val) {
            this.index = val || 1
        },
        pageSize(val) {
            this.limit = val || 10
        },
        total(val) {
            this.size = val || 1
        }
    }
}
</script>

<style scoped>
</style>

所使用的的父组件中分页组件标签

<v-pagination :page-index="sreachInfo.PageIndex" :total="count" :page-size="sreachInfo.PageSize" @change="getMore"></v-pagination>

来自分享的快乐