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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐