描述
通过获取后台返的数据，前端实现分页功能，这里是vue结合elementUI里的分页组件来实现的。
html代码
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 20, 30]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
参数说明：
currentPage: 1, // 当前页数，
pageSize: 5, // 每一页显示的条数
total:20, // 总的条数
handleSizeChange（）// 改变每一页显示的条数
handleCurrentChange() // 改变当前的页数
表格
<el-table
:data="studentData.slice((currentPage -1) * pageSize, pageSize * currentPage)"
border
style="width: 100%">
<el-table-column prop="name" label="姓名" align= 'center'> </el-table-column>
<el-table-column prop="age" label="年龄" align= 'center'> </el-table-column>
<el-table-column prop="sex_text" label="性别" align= 'center'> </el-table-column>
<el-table-column prop="status_text" label="状态" align= 'center'> </el-table-column>
<el-table-column prop="address" label="地址" align= 'center'> </el-table-column>
<el-table-column prop="number" label="学号" align= 'center'> </el-table-column>
<el-table-column prop="class" label="班级" align= 'center'> </el-table-column>
<el-table-column prop="phone" label="联系方式" align= 'center'> </el-table-column>
<el-table-column label="操作" align= 'center'>
<template>
<el-button type="danger" size="mini" icon="el-icon-delete" title="删除"></el-button>
</template>
</el-table-column>
</el-table>
根据 slice((currentPage -1) * pageSize, pageSize * currentPage)公式来计算每页展示的条数
data中的数据
data(){
return {
currentPage: 1, // 当前页数，
pageSize: 5, // 每一页显示的条数
total:20, // 总的条数
studentData: [
{
id:'1',
name:'王晓丽',
age:18,
sex:'1',
class:'一年级一班',
number: '2017060523',
status: '1',
address: '海南省海口市龙华区',
phone: '18789887234'
},
{
id:'2',
name:'曾小雪',
age:17,
sex:'1',
class:'一年级三班',
number: '2017060524',
status: '2',
address: '海南省海口市美兰区',
phone: '18789887231'
},
{
id:'3',
name:'王端',
age:19,
sex:'2',
class:'一年级五班',
number: '2017060520',
status: '3',
address: '海南省海口市秀英区',
phone: '18789887238'
},
{
id:'1',
name:'王晓丽',
age:18,
sex:'1',
class:'一年级一班',
number: '2017060523',
status: '1',
address: '海南省海口市龙华区',
phone: '18789887234'
},
{
id:'2',
name:'曾小雪',
age:17,
sex:'1',
class:'一年级三班',
number: '2017060524',
status: '2',
address: '海南省海口市美兰区',
phone: '18789887231'
},
{
id:'3',
name:'王端',
age:19,
sex:'2',
class:'一年级五班',
number: '2017060520',
status: '3',
address: '海南省海口市秀英区',
phone: '18789887238'
},
{
id:'1',
name:'王晓丽',
age:18,
sex:'1',
class:'一年级一班',
number: '2017060523',
status: '1',
address: '海南省海口市龙华区',
phone: '18789887234'
},
{
id:'2',
name:'曾小雪',
age:17,
sex:'1',
class:'一年级三班',
number: '2017060524',
status: '2',
address: '海南省海口市美兰区',
phone: '18789887231'
},
{
id:'3',
name:'王端',
age:19,
sex:'2',
class:'一年级五班',
number: '2017060520',
status: '3',
address: '海南省海口市秀英区',
phone: '18789887238'
},
{
id:'1',
name:'王晓丽',
age:18,
sex:'1',
class:'一年级一班',
number: '2017060523',
status: '1',
address: '海南省海口市龙华区',
phone: '18789887234'
},
{
id:'2',
name:'曾小雪',
age:17,
sex:'1',
class:'一年级三班',
number: '2017060524',
status: '2',
address: '海南省海口市美兰区',
phone: '18789887231'
},
{
id:'3',
name:'王端',
age:19,
sex:'2',
class:'一年级五班',
number: '2017060520',
status: '3',
address: '海南省海口市秀英区',
phone: '18789887238'
},
{
id:'1',
name:'王晓丽',
age:18,
sex:'1',
class:'一年级一班',
number: '2017060523',
status: '1',
address: '海南省海口市龙华区',
phone: '18789887234'
},
{
id:'2',
name:'曾小雪',
age:17,
sex:'1',
class:'一年级三班',
number: '2017060524',
status: '2',
address: '海南省海口市美兰区',
phone: '18789887231'
},
{
id:'3',
name:'王端',
age:19,
sex:'2',
class:'一年级五班',
number: '2017060520',
status: '3',
address: '海南省海口市秀英区',
phone: '18789887238'
},
{
id:'1',
name:'王晓丽',
age:18,
sex:'1',
class:'一年级一班',
number: '2017060523',
status: '1',
address: '海南省海口市龙华区',
phone: '18789887234'
},
{
id:'2',
name:'曾小雪',
age:17,
sex:'1',
class:'一年级三班',
number: '2017060524',
status: '2',
address: '海南省海口市美兰区',
phone: '18789887231'
},
{
id:'3',
name:'王端',
age:19,
sex:'2',
class:'一年级五班',
number: '2017060520',
status: '3',
address: '海南省海口市秀英区',
phone: '18789887238'
},
{
id:'1',
name:'王晓丽',
age:18,
sex:'1',
class:'一年级一班',
number: '2017060523',
status: '1',
address: '海南省海口市龙华区',
phone: '18789887234'
},
{
id:'2',
name:'曾小雪',
age:17,
sex:'1',
class:'一年级三班',
number: '2017060524',
status: '2',
address: '海南省海口市美兰区',
phone: '18789887231'
},
{
id:'3',
name:'王端',
age:19,
sex:'2',
class:'一年级五班',
number: '2017060520',
status: '3',
address: '海南省海口市秀英区',
phone: '18789887238'
},
{
id:'1',
name:'王晓丽',
age:18,
sex:'1',
class:'一年级一班',
number: '2017060523',
status: '1',
address: '海南省海口市龙华区',
phone: '18789887234'
},
{
id:'2',
name:'曾小雪',
age:17,
sex:'1',
class:'一年级三班',
number: '2017060524',
status: '2',
address: '海南省海口市美兰区',
phone: '18789887231'
},
{
id:'3',
name:'王端',
age:19,
sex:'2',
class:'一年级五班',
number: '2017060520',
status: '3',
address: '海南省海口市秀英区',
phone: '18789887238'
},
]
}
},
total的值一般后台返，这里是写死的
methods:{
handleSizeChange(val) {
this.pageSize = val
this.currentPage = 1
console.log(`每页 ${
val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${
val}`);
this.currentPage = val
},
/**
* status 1 已入学； 2 未入学； 3 休学中
* 异步获取学生列表数据
*/
getStudentData(){
this.studentData.forEach(item => {
// 为了不改变原数据，新增一个新字段sex_text，status_text；这样在提交的时候不会改变原来数据里的参数。
item.sex === '1' ? item.sex_text = '女' : item.sex_text = '男';
if(item.status === '1'){
item.status_text = '已入学'
}
if(item.status === '2'){
item.status_text = '未入学'
}
if(item.status === '3'){
item.status_text = '休学中'
}
})
}
}