后臺一次返回的數(shù)據(jù)量很大窒所，需要展示全部數(shù)據(jù)時耗時非常長，對瀏覽器的壓力非常大，因此可以改用前端分頁的方式來展示數(shù)據(jù)兑燥，現(xiàn)在就來具體實現(xiàn)一下：
分頁組件使用element-ui的<el-pagination></el-pagination>組件
一百拓，template組件
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNo"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="data.length"
>
</el-pagination>
template組件如上代碼所示琴锭，現(xiàn)在我們來看script部分
export default {
name: 'Pager',
data(){
return {
data: [], //通過ajax拿到的數(shù)據(jù)
pageNo: 1, //當前頁
pageSize: 10 //每頁顯示條目數(shù)
}
},
computed: {
AfterChangeData() {
let start = (this.pageNo - 1) * this.pageSize;
let end = this.pageNo * this.pageSize;
return this.data.slice(start, end)
}
},
methods: {
//分頁大小改變
handleSizeChange(val) {
this.pageSize = val;
},
//當前頁數(shù)改變
handleCurrentChange(val) {
this.pageNo = val;
}
}
}
重點在于計算屬性中對數(shù)據(jù)的處理哦！
以上就是今天的總結(jié)衙传。
最后是我司UI小姐姐專門給偶做的頭像决帖！哈哈
西瓜.png
