vue + element 前端分页缓存实现
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
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();
},
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献7条内容
所有评论(0)