业务需求：后台获取全部数据，在前端做分页
核心：hotcourse = res.data.slice((val-1)*this.pageSize,val*this.pageSize) ，将从后台获取的数据取一个区间，赋给循环json数据
val：当前页码 pageSize：每页条数
demo:
<li v-for="item in hotcourse1" >
......
</li>
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[1, 5, 10, 20]"
:page-size='pageSize'
layout="total, prev, pager, next, jumper"
:total="total">
</el-pagination>
data() {
return {
//分页
currentPage: 1,// 当前页数
pageSize:4,// 每页条数
total:total, // 总条目数
hotcourse:[],
};
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(val)
console.log(`当前页: ${val}`);
this.hotcourse = res.data.slice((val-1)*this.pageSize,val*this.pageSize)
},
从后台获取到数据之后需要
this.hotcourse = res.data.slice(0,this.pageSize) 不然会造成空白