vue项目 使用elementui中的el-pagination

1.封装代码

<template lang="html">
    <div class="pages">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage"  :page-size="pageSize" :page-sizes="pageSizes"
        layout="total, sizes, prev, pager, next, jumper"
        background :total="totalPage"></el-pagination>
    </div>
</template>

<script>
export default {
    data(){
        return {
        }
    },
    name: 'pagination',
    props: {
        'pageSizes': {
            type: Array,
            default() {
                return [10, 20, 30, 40, 50, 100,300,500];
            }
        },
        'pageSize': {
            type: Number,
            default: 10
        },
        'totalPage': Number,
        'currentPage': Number,
    },
    methods: {
        handleSizeChange(e) {
            this.$emit('handleSizeChange', e)
        },
        handleCurrentChange(e) {
            this.$emit('handleCurrentChange', e)
        }
    }
}
</script>

<style lang="css" scoped>
.pages {
    padding: 20px 0;
    text-align: center;
}
</style>

2.全局注册分页组件

import pagination  from '@/components/newPagination'
Vue.component('pagination', pagination)

3.使用

<pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" 
:current-page="query.pageNumber" :totalPage="query.totalPage" :pageSize="query.pageSize"/>

          query:{
                pageNumber: 1,
                pageSize: 10,
                totalPage: 0,//总条数，不是总页数
            }

        getData(){
            var url = "/foundaDis/selectYicheDis";
            var data = {
                pageNumber: this.query.pageNumber,
                pageSize: this.query.pageSize,
                distributorId:this.distributorId,
            };
            this.$post(url, data).then(res => {
                var data = res.rows;
                this.tableData = data;
                this.query.totalPage = res.total;
            })
        }

        //每页最多显示条数10   20   30   50
        handleSizeChange(val) {
            this.query.pageSize = val
            this.handleCurrentChange(1)
        },
        //翻页
        handleCurrentChange(val) {
            this.query.pageNumber = val
            this.getData();
        },