vue + element 分页缓存实现
需求起源：
今天在做工作流审批，但是明细数据是分页的，如下：
我填了第一页的审批数量，如果翻页的话就会覆盖第一页的数据，这肯定不行的啊！
分析问题：
1、简单的缓存没啥问，从第一页翻到第二页、第二页翻到第三页，这样有顺序的翻页缓存比较的简单，只需要把每次拿到的值放到一个数组中，如果用户不按规矩来，例如刚进来是第一页，用户立马翻到第3页，第二页的数据也就空了。如果追加到数组中顺序就乱掉了！所以我的办法是，将第二页的位置补null来填满位置，这样的话我第三页的数据放到数组的位置就是对的！
2、用户改变每页条数问题，比如默认页面显示10个，第一页，然后用户点到了第3页，然后用户改变每页显示的条数为20，此时会有两个问题，第一，数据超过总条数的问题，第二部分数据没拿到的问题因为我们的缓存的数组有部分为空，所以可能拿到部分的为null的数据，所以我弄了个检查每10条中是否有包含null的数据，如果有就加载这10条！
最终实现：
element-ui代码：
<!-- 明细列表 -->
<el-table :data="midSubmitDetailTableData" border stripe style="width: 100%; height: 400px;">
<el-table-column prop="billCode" label="清单编号"></el-table-column>
<el-table-column prop="changeCode" label="变更令编号"></el-table-column>
<el-table-column prop="projectContent" label="工程内容"></el-table-column>
<el-table-column prop="unit" label="单位"></el-table-column>
<el-table-column prop="unitPrice" label="单价"></el-table-column>
<el-table-column prop="totalAcount" label="总数量"></el-table-column>
<el-table-column prop="submitAmount" label="本次交工数量"></el-table-column>
<el-table-column prop="confirmAmount" label="审核数量">
<template slot-scope="scope">
<input :value="scope.row ? scope.row.confirmAmount : ''" @change="updateConfirmAmount($event, scope.row)" placeholder="请输入审核数量" />
</template>
</el-table-column>
</el-table>javascript代码：
//获取明细数据
getDetailData() {
let pageNo = this.midSubmitDetail.currentPage;
let pageSize = this.midSubmitDetail.pageSize;
let total = this.midSubmitDetail.totalPage;
let pageStart = (pageNo - 1) * pageSize;
let pageEnd = pageStart + pageSize;
let cacheLength = this.cacheData.length;
let dataList = [];
if(cacheLength == 0 ){
let url = "a/investment/midSubmit/detail/data";
let params = {
submitId: this.queryParam.businessKey ,
pageNo: this.midSubmitDetail.currentPage,
pageSize: this.midSubmitDetail.pageSize
};
bus.$emit("getAjax", url, params, rs => {
//获取列表数据
this.midSubmitDetail.totalPage = rs.body.total;
let index = 0;
for(let i = 0 ; i < rs.body.total; i++){
if( i >= pageStart && i < pageEnd){
let data = rs.body.rows[index++];
this.cacheData.push(data);
dataList.push(data);
}else if(!this.cacheData[i]){
this.cacheData.push(null);
}
}
this.midSubmitDetailTableData = dataList;
});
}else{
var isAjax = false;
for(var k = pageStart; k < pageEnd ; k+=10){
if(cacheLength > k && this.cacheData[k] == null){
isAjax = true;
var sessionId = sessionStorage.getItem("JsessionId");
var url = testUrl + "a/investment/midSubmit/detail/data?__sid="+sessionId;
var params = {
submitId: this.queryParam.businessKey ,
pageNo: k / 10 + 1,
pageSize: 10,
maxPageNo : Math.ceil(pageEnd / 10)
};
var obj = this;
$.ajax({
url : url,
type : 'get',
data : params,
success : function(rs){
var _this = this;
var _url = this.url;
var _params = _url.substring(_url.indexOf('?')+1, _url.length);
var _paramsArray = _params.split('&');
var _paramsJson = {};
for (var i = 0 ; i < _paramsArray.length; i++) {
var temp = _paramsArray[i].split('=');
_paramsJson[temp[0]] = temp[1];
}
debugger;
var index = 0;
var start = ( _paramsJson.pageNo - 1) * _paramsJson.pageSize;
for(var j = start ; j <= start + ( _paramsJson.pageSize - 1); j++ ){
obj.cacheData[j] = rs.rows[index++];
}
if(_paramsJson.pageNo == _paramsJson.maxPageNo){
dataList = [];
for (var i = pageStart; i < rs.total; i++ ) {
dataList.push(obj.cacheData[i]);
}
obj.midSubmitDetailTableData = dataList;
}
}
});
}
}
if(!isAjax){
pageEnd = pageEnd > total ? total : pageEnd;
this.midSubmitDetailTableData = [];
for (let i = pageStart; i < pageEnd; i++ ) {
this.midSubmitDetailTableData.push(this.cacheData[i]);
}
}
}
},
//footer控制页面数据条数
midSubmitDetailSizeChange(val) {
this.midSubmitDetail.currentPage = 1;
this.midSubmitDetail.pageSize = val;
this.getDetailData();
},
//footer控制页面跳转
midSubmitDetailCurrentChange(val) {
this.midSubmitDetail.currentPage = val;
this.getDetailData();
},