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

Vue2.x假分页处理数据量过多导致页⾯渲染慢的问题本⽂⽤到的技术栈 :Vue 2.x + webpack + Element UI 1.4.6

1.背景介绍：

分页⼀般和表格⼀起使⽤表⽰当前数据总页数，粗略来讲分如下两种：

真分页——每次根据页码、页⼤⼩获取数据并展⽰。

假分页——⼀次性获取所有数据，根据页码、页⼤⼩展⽰。

⼀般⽤的⽐较多的是真分页，每次按需加载可以避免很多问题（如内存占⽤过多等）。

最近在做⼀个ctmp项⽬，中⽂全称集中测试管理平台，很多地⽅会涉及到表格处理⼤量数据，通常情况下我们使⽤表格插件jqGrid，datatables 或者Element UI⾃带的table组件等，其原理都是切换分页都会触发ajax请求，加载需要的数据。本次问题是应客户要求⼀次加载所有的数据并展⽰于页⾯，如果不采⽤分页⼀次性全部加载并展⽰前端，在数据量⼤的时候前端页⾯渲染较慢，影响⽤户体验。故经讨论后采⽤假分页将⼀次性返回的数据存⼊数组并切割成⼏个长度相同的数组，以处理前端数据展⽰问题。

2.进⼊正题

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

jumper2

Paste_Image.png

2.1 这⾥采⽤Element-UI 的table和pagination 组件

html部分：

本文发布于:2024-09-21 20:37:51，感谢您对本站的认可！

本文链接：https://www.17tex.com/tex/2/351164.html

上一篇：人教版八年级英语下册UNIT 7 学情评估附答案 (2)

下一篇：vueelement-uiel-table表格二次封装自定义el-table表格组件