Vue 2.x 假分页处理数据量过多导致页面渲染慢的问题

本文用到的技术栈 :Vue 2.x + webpack + Element UI 1.4.6

1.背景介绍：

分页一般和表格一起使用表示当前数据总页数，粗略来讲分如下两种：
真分页——每次根据页码、页大小获取数据并展示。
假分页——一次性获取所有数据，根据页码、页大小展示。
一般用的比较多的是真分页，每次按需加载可以避免很多问题（如内存占用过多等）。
最近在做一个ctmp项目，中文全称集中测试管理平台，很多地方会涉及到表格处理大量数据，通常情况下我们使用表格插件jqGrid，datatables或者Element UI自带的table组件等，其原理都是切换分页都会触发ajax请求，加载需要的数据。本次问题是应客户 要求一次加载所有的数据并展示于页面，如果不采用分页一次性全部加载并展示前端，在数据量大的时候前端页面渲染较慢，影响用户体验。故经讨论后采用假分页将一次性返回的数据存入数组并切割成几个长度相同的数组，以处理前端数据展示问题。

2.进入正题

案例：如下图，进入页面后会加载“已分配用例列表”的数据，当数据量大于1000条时加载速度明显慢了。本次采用假分页方式，即一次性获取所有数据但在前端只默认渲染10条数据。

Paste_Image.png

2.1 这里采用Element-UI 的table和pagination 组件
html部分：

<div class="block">
        <el-pagination  class="text-right" ref="taskPage"
           //改变每页展示的数据条数        
        @size-change="handleSizeChange" 
            // 左右翻页
            @current-change="handleCurrentChange"
            //当前页码          
           :current-page="currentPage"
           //选择每页展示数据条数
          :page-sizes="[10, 20, 30, 40, 50]"
            //每页展示的数据条数
          :page-size="pageSize"
             //总的数据量
          :total="taskTotal"
          layout="sizes, total, prev, pager, next, jumper">
        </el-pagination>
    </div>

javascript部分：

export default {
  data(){
     return {
           // 翻页数据
        currentPage: 1,//默认显示第一页
        taskTotal: 0,//总数据量，初始化为0
        pageSize: 10,//每页默认展示10条数据
        caseTable: [], // 存放后端一次性返回的所有数据
        handCaseTable: [], // 存放处理假分页后的数据(等距切割)
        showCaseTable: [], // 切割后页面应展示的数据（绑定table组件的data属性 即：data='showCaseTable'）

     }  
  }，
methods:{
      refreshTable(){
          //省略ajax请求，rows为ajax请求一次返回的所有数据 
            this.caseTable = rows;
            this.taskTotal = rows.length;
            this.arrSlice(this.caseTable,this.pageSize)
            this.showCaseTable=this.handCaseTable[0]
      },
      //将一维数组等距切割后组成二维数组
      arrSlice:function  (arr,size) {//arr 被切割的数组  size切割长度
            this.handCaseTable=[];//清空之前的数据
            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));
            }
        },
      // 选择每页显示记录数
      handleSizeChange (size) {
        this.pageSize = size
        this.arrSlice(this.caseTable,this.pageSize)
        //默认显示切割后的第一个数组的数据
        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点击的页码
        this.currentPage = current
        this.showCaseTable=this.handCaseTable[this.currentPage-1]  //currentPage从1开始
      },
        

  }
}

以上就是处理假分页的部分源码及思路，打开控制台切换到NetWork可以看到切换页面并没有触发ajax请求，至此假页面处理分页基本完成。如有疑问欢迎提出，如有错误请指正，谢谢。