vue 限制渲染条数_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部分：