baianxi_admin/src/components/Page.vue

<style lang="scss">
 @import '../style/style.scss';
    .el-pagination{
        li,button{
            border: 1px solid #CACACA !important;
            background-color: #fff !important;
        }
        .active{
            border:none !important;
            background: $color !important;
        }
    }
</style>
<template>
    <el-pagination
    @current-change="getData"
    background :page-size='20'
    @size-change="handleSizeChange"
    :page-sizes="[1,20, 30, 40, 50,60,70,80,90,100]"
    layout="sizes,total,prev, pager, next"
    :total="total">
    </el-pagination>
</template>
<script>
export default {
    data(){
        return{
            page:1
        }
    },
    props: {
        total:'',
    },
    methods:{
        getData(type){
            // if(type == 1){
            //     this.data.pageNumber=this.data.pageNumber-1
            // }else if(type == 2){
            //     this.data.pageNumber=this.data.pageNumber+1
            // }
             this.page=type
            this.$emit('pageChange')
        },
        handleSizeChange(val){
            this.$emit('pageChange',val)
        }
    }
}
</script>