vue 封装 pagination分页

父组件

<template>
	<el-table>
    	...
    </el-table>
	<paging :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" ></paging>
</template>
<script>
	import paging from './paging';
    export default {
        name:"...",
        components:{paging},
        data(){
            return{
                total:""   /*根据ajax获取数据List个数*/
            }
        },
        methods:{
            handleSizeChange(val) {
                this.pageSize = val;
                this.currPage = '1';
                this.getTableList();
            },
            handleCurrentChange(val) {
                this.currPage = val;
                this.getTableList();
            },
            /*
            执行到这步就知道了
            pageSize，currPage；就可以根据结果获取指定分页的数据了
            */
            getTableList(){
                /*执行axios请求*/
            }
        }
    }
</script>

paging子组件

<template>
  <el-pagination
    :total="total"
    :current-page.sync="currentPage"
    :page-sizes="pageSizeArr"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"

    @size-change="handleSizeChange"
    @current-change="handleCurrentChange">
    <!--
      total 总条目数
      current-page 当前页数
      page-sizes 每页显示个数选择器的选项设置
      page-size 每页显示条目个数
      layout 组件布局，子组件名用逗号分隔

      @size-change pageSize改变时会触发
      @current-change  当前页面更改时会触发
    -->
  </el-pagination>
</template>

<script>
    export default {
        name: "paging",
        props:{
            total: Number,    /*总条数*/
            defaultArr:Array,   /*使用者给的默认 页数项*/
            getSize:Number,
            getCurrent:Number
        },
        data() {
            return {
                pageSizeArr:[5],   /*每页个数选项*/
                pageSize:5,     /*当前每页个数*/
                currentPage:1   /*当前页*/
            };
        },
        watch:{
            total(val){   /*数据变更时触发*/
                let arr=[];
                if(this.defaultArr){
                    arr=this.defaultArr;
                }else{
                    arr=[20,50,100,200,500];
                }
                let arr1=[5];
                if(val>5){
                    for(let n=0;n<arr.length;n++){
                        if(arr[n]<val){
                            arr1.push(arr[n])
                        }else{
                            arr1.push(arr[n]);
                            break
                        }
                    }
                }
                /*随数据的不同，显示不同个数的 页数项*/
                this.pageSizeArr = arr1;
                /*当前组件当前页 跳转到第 1 页；*/
                this.currentPage = 1;
                /*
                  触发父组件中 告知页数项更改为：5 ；
                  父组件自己也需要把当前页重新设置为第一页；
                      页数项每次更改时 handleSizeChange ：都应该跳到第一页
                * */
                this.$emit('handleSizeChange',5);
            }
        },
        methods: {
            //每页的条数
            handleSizeChange(val) {  /*更改页数项的时候触发*/
                // 更改条数的时候要使当前页显示到第一页 父子组件都需要更改
                this.currentPage=1;

                // 触发父组件的 更改页数项的方法
                this.$emit('handleSizeChange',val);
            },
            //页数
            handleCurrentChange(val) {
                this.$emit('handleCurrentChange',val);
            }
        },
    }
</script>

<style scoped>
</style>