本文用到的技術(shù)棧 :Vue 2.x + webpack + Element UI 1.4.6
1.背景介紹：
分頁一般和表格一起使用表示當(dāng)前數(shù)據(jù)總頁數(shù)，粗略來講分如下兩種：
真分頁——每次根據(jù)頁碼盲链、頁大小獲取數(shù)據(jù)并展示蝇率。
假分頁——一次性獲取所有數(shù)據(jù)，根據(jù)頁碼悠轩、頁大小展示间狂。
一般用的比較多的是真分頁，每次按需加載可以避免很多問題（如內(nèi)存占用過多等）火架。
最近在做一個ctmp項(xiàng)目鉴象，中文全稱集中測試管理平臺忙菠，很多地方會涉及到表格處理大量數(shù)據(jù)，通常情況下我們使用表格插件jqGrid纺弊，datatables或者Element UI自帶的table組件等牛欢，其原理都是切換分頁都會觸發(fā)ajax請求，加載需要的數(shù)據(jù)淆游。本次問題是應(yīng)客戶 要求一次加載所有的數(shù)據(jù)并展示于頁面傍睹，如果不采用分頁一次性全部加載并展示前端，在數(shù)據(jù)量大的時候前端頁面渲染較慢犹菱，影響用戶體驗(yàn)拾稳。故經(jīng)討論后采用假分頁將一次性返回的數(shù)據(jù)存入數(shù)組并切割成幾個長度相同的數(shù)組，以處理前端數(shù)據(jù)展示問題腊脱。
2.進(jìn)入正題
案例：如下圖访得，進(jìn)入頁面后會加載“已分配用例列表”的數(shù)據(jù)，當(dāng)數(shù)據(jù)量大于1000條時加載速度明顯慢了陕凹。本次采用假分頁方式悍抑，即一次性獲取所有數(shù)據(jù)但在前端只默認(rèn)渲染10條數(shù)據(jù)。
2.1 這里采用Element-UI 的table和pagination 組件
html部分：
<div class="block">
<el-pagination class="text-right" ref="taskPage"
//改變每頁展示的數(shù)據(jù)條數(shù)
@size-change="handleSizeChange"
// 左右翻頁
@current-change="handleCurrentChange"
//當(dāng)前頁碼
:current-page="currentPage"
//選擇每頁展示數(shù)據(jù)條數(shù)
:page-sizes="[10, 20, 30, 40, 50]"
//每頁展示的數(shù)據(jù)條數(shù)
:page-size="pageSize"
//總的數(shù)據(jù)量
:total="taskTotal"
layout="sizes, total, prev, pager, next, jumper">
</el-pagination>
</div>
javascript部分：
export default {
data(){
return {
// 翻頁數(shù)據(jù)
currentPage: 1,//默認(rèn)顯示第一頁
taskTotal: 0,//總數(shù)據(jù)量杜耙，初始化為0
pageSize: 10,//每頁默認(rèn)展示10條數(shù)據(jù)
caseTable: [], // 存放后端一次性返回的所有數(shù)據(jù)
handCaseTable: [], // 存放處理假分頁后的數(shù)據(jù)(等距切割)
showCaseTable: [], // 切割后頁面應(yīng)展示的數(shù)據(jù)（綁定table組件的data屬性 即：data='showCaseTable'）
}
}搜骡，
methods:{
refreshTable(){
//省略ajax請求，rows為ajax請求一次返回的所有數(shù)據(jù)
this.caseTable = rows;
this.taskTotal = rows.length;
this.arrSlice(this.caseTable,this.pageSize)
this.showCaseTable=this.handCaseTable[0]
},
//將一維數(shù)組等距切割后組成二維數(shù)組
arrSlice:function (arr,size) {//arr 被切割的數(shù)組 size切割長度
this.handCaseTable=[];//清空之前的數(shù)據(jù)
for (var i=0;i<Math.ceil(arr.length/size);i++) {
var start = i*size;
var end = start + size;
this.handCaseTable.push(arr.slice(start,end));
}
},
// 選擇每頁顯示記錄數(shù)
handleSizeChange (size) {
this.pageSize = size
this.arrSlice(this.caseTable,this.pageSize)
//默認(rèn)顯示切割后的第一個數(shù)組的數(shù)據(jù)
this.showCaseTable=this.handCaseTable[0]
var maxPage = Math.ceil(this.taskTotal / size)
if (this.currentPage > maxPage) this.currentPage = maxPage
else this.showCaseTable=this.handCaseTable[this.currentPage-1]
},
// 翻頁
handleCurrentChange (current) {//current點(diǎn)擊的頁碼
this.currentPage = current
this.showCaseTable=this.handCaseTable[this.currentPage-1] //currentPage從1開始
},
}
}
以上就是處理假分頁的部分源碼及思路佑女，打開控制臺切換到NetWork可以看到切換頁面并沒有觸發(fā)ajax請求记靡，至此假頁面處理分頁基本完成。如有疑問歡迎提出珊豹，如有錯誤請指正簸呈，謝謝。
