業務需求：后台獲取全部數據，在前端做分頁
核心：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) 不然會造成空白