封装一个分页模块

1、使用的环境Vue2.0+element-ui

下面场景下默认您已经安装了element-UI并引用

2、创建paging.vue

可以对分页进行单页多条展示

<template>
	<div class="paging">
	  <el-pagination background layout="total, sizes, prev, pager, next" 
	  @current-change="currentChange"
	    @size-change="handleSizeChange" 
		:page-sizes="[10, 15,20, 50, 100]" 
		:current-page="currentPage"
	    :page-size="pageSize" :total="total">
	  </el-pagination>
	</div>
</template>

<script>
export default {
	components: {},
	props:{
		currentPage:{
			type:Number,
			default:1
		},
		pageSize:{
			type:Number,
			default:10
		},
		total:{
			type:Number,
			required:true
		}
	},
	data() {
	    return {
			
		}
	},
	methods:{
		handleSizeChange(size) {
			this.$emit('size-change',size)
		},
		//分页
		currentChange(page) {
			this.$emit('current-change',page)
		}
	}
}
</script>

<style>
</style>

3、父级组件father.vue引入paging模块

<template>
    <div class="botanyTable">
				<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" border
					style="width: 100%">
					<template v-for="(item,index) in tableList">
						<el-table-column :prop="item.prop" :label="item.label"></el-table-column>
					</template>
					
					<el-table-column label="操作" width="150">
						<template slot-scope="scope">
							<el-button type="text" size="small" @click="openEdit(scope.row)">编辑</el-button>
							<el-button type="text" size="small" @click="deleteList(scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
    <paging :current-page="currentPage" :page-size="pageSize" :total="tableData.length"
				@current-change="currentChange" @size-change="handleSizeChange"></paging>
</template>
<script>
	import paging from '../components/common/paging.vue'
	export default {
		components: {
			paging 
		},
		data() {
			return {
				pageSize: 10,
				currentPage: 1,
                tableData:[],//项目开发中tableData数据从后台获得
                tableList: [{
						prop: 'adminName',
						label: '用户名'
					},
					{
						prop: 'phoneNumber',
						label: '手机号'
					},
					{
						prop: 'permission',
						label: '权限'
					}
				],
        },
        methods:{
            handleSizeChange(currentPageSize) {
				this.pageSize = currentPageSize;
			},
			//分页
			currentChange(currentPage) {
				this.currentPage = currentPage;
			},
            openEdit(item){
            },
            deleteList(item){
            }
        }
    }
</script>