网页获取数据进行分页主要有前端分页和后端分页，对于数据量较小的数据，可以使用前端分页进行实现。但是一般的分页都是后端获取分页实现
前端分页的封装
思路：
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>