网页获取数据进行分页主要有前端分页和后端分页，对于数据量较小的数据，可以使用前端分页进行实现。但是一般的分页都是后端获取分页实现

前端分页的封装

思路：
1.假设一页展示的是10条数据
2.第一页展示的数据为第1-第10条，其下标是0-9
3.第二页展示的数据为第11-第20条，其下标为10-19
4.第三页展示的数据为第21-第30条，其下标为20-29
5.。。。。

由以上分析，递归可得
1.第一页展示数据= 原始数据.slice((第一页-1) * 10条，第一页 * 10条)
2.第二页展示数据= 原始数据.slice((第二页-1) * 10条，第二页 * 10条)
3.第三页展示数据= 原始数据.slice((第三页-1) * 10条，第三页 * 10条)
4.。。。。
前端分页公式：当前页数据=原始数据.slice（（当前页数-1）* 每页条数，当前页数 * 当前条数）

<template>
	<el-table :data="compData" border style="width: 100%">
	</el-table>
</template>
<script>
	export default{
		data(){
			return{
					tableDate:[],
					currentPage:1,
					pageSize:10,
					total:0,
				}
		},
		//有计算内容的时候需要写入计算属性中
		computed:{
			compData(){
				return this.tableData.slice((this.currentPage - 1) * this.pageSize , this.currentPage * this.pageSize)
			}
		}
	}
</script>

如此便可以在分页的界面中使用该公式了！

后端进行分页的封装，利用el-pagination

选择该完整功能的组件进行封装
首先，了解各个属性的意思

事件：
@size-change：pageSize改变时，会触发 回调参数：每页条数
@current-change：currentPage改变时会触发 回调参数：当前页
属性：
current-page：当前页数，支持 .sync 修饰符
page-sizes：每页显示个数选择器的选项设置，数字数组形式
page-size:每页显示条目的个数，支持.sync修饰符 数字形式
layout:布局组件，子组件名用逗号分隔 ---- 直接复制粘贴即可
total：总条目数

触发的内容
1.每页显示的条数，page-size属性，@size-change事件
2.当前的页，current-page属性，@current-change事件

需要接收的参数
1.总条数：total
2.当前页
3.当前页显示的条数

<template>
  <div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 50，100]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>
<script>

export default = {
	// 传递需要接收的内容,总数和当前页
	props：{
		total:{
			type:Number,
		},
		currentPage:{
			type:Number,
		}
	},
	data(){
		return{
			//每页显示的条数触发的事件
			handleSizeChange(pagenum){
			//触发被调用者的页面渲染
			//this.$emit('父组件事件',每页显示的条数)
			this.$emit("changeRows", val)
			},
			// 当前页触发的事件
			handleCurrentChange(page){
			//触发被调用者页面渲染
			//this.$emit('父组件事件',当前页)
			this.$emit("changePage", val)
			}
		}
	}
}

</script>

父组件使用子组件

<template>
	<div>
	    <pagination class="el-pagination"
                :page="page"
                :totalCount="total"
                @changePage="goPage"
                @changeRows="goRows">
    </pagination>
	</div>
</template>

<script>
import pagination from '@/components/Pagination.vue'
export default {
	data(){
		return {
			page:1,
			limit:10,
			total:''
		}
	},
	methods:{
		   // 分页
    goPage (val) {
      this.page = val;
      //重新获取最新数据,如：
      this.getList();
    },
    //子级触发的父级的内容
    goRows (val) {
      this.limit = val;
      //重新获取最新数据，如：
      this.getList();
    }
	}
	
}
</script>