vue封装公共的分页组件

1. 新建分页组件

<template>
<!--  公共的分页组件 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-size="pageSize"
        :page-sizes="pageSizes"
        :total= total
        layout="total, prev, pager, next, sizes"
        >
    </el-pagination>
</template>

<script>
export default {
    props: {
        pageNo: Number, //页数
        total: Number, // 总数
        pageSize: {
            type: Number,
            default: 10
        },
    },
    watch:{
        pageSize(val){
            this.pageSizeP = val;
        },
        pageNo(val){
            this.currentPage = val;
        }
    },
    data(){
        return {
            currentPage: 1, // //第几页 默认第1页10条
            pageSizeP: 10,  //每页显示几条数据
            pageSizes: [10, 20, 50, 100]  //可选的每页多少条数据
        }
    },
    methods: {
        // pageSize 改变时会触发 返回每页条数
        handleSizeChange(val){
            this.pageSizeP = val;
            this.$emit('refreshTable', this.currentPage, val);
        },
        // currentPage 改变时会触发 返回当前页
        handleCurrentChange(val){
            this.currentPage = val;
            this.$emit('refreshTable', val, this.pageSizeP);
        }
    }
}
</script>

2. main.js中全局注册该组件

// 全局注册分页组件
import pagination from '@/components/pagination'
Vue.component('pagination', pagination)

3. 引入公共组件

        <pagination
	         :pageNo='tableParam.pageNo' 
	         :pageSize="tableParam.pageSize"
	          :total='tableParam.tabelTotal' 
	          @refreshTable="initMemberTable">
        </pagination>

4. 请求列表数据的方法

 initMemberTable(num, size){
            let param = {
                pageNo: num,  
                pageSize: size,
                orderCol: this.tableParam.orderCol,  
                orderType: this.tableParam.orderType,
                projectId: this.projectID
            }
            this.isLoading = true;
            getList('/bg/project/member/page', param).then(res => {
                if(res.retcode == 10){
                    this.memberTableData = res.data.list || [];
                    this.tableParam.tabelTotal = res.data.total;
                    this.tableParam.currentPage =  res.data.pageNum;
                    this.tableParam.pageNo =  res.data.pageNum;
                    this.tableParam.pageSize = res.data.pageSize;
                }else{
                    this.$message.warning(res.retmsg);
                }
                this.isLoading = false;
            }).catch(error => {
                console.log(error);
                this.isLoading = false;
            })
        },