一种优化Vue前端表格组件渲染性能的方法及系统与流程

本发明涉及计算机应用技术领域，具体地说是一种优化vue前端表格组件渲染性能的方法及系统。

背景技术：

当前vue前端表格组件采用模板渲染数据列表，其实现原理是有一行数据就渲染一行dom元素，这样对于大数据量的表格，就会由于dom元素过多导致页面占用内存，导致页面卡顿，降低了用户体验。某些开源的框架采用分页的方式解决这个性能问题，但是在分页不适用的业务场景下，应用就会遇到性能瓶颈。

基于此，亟需一种应用性能理想、通过前端技术优化vue大数据的表格的前端渲染性能的技术。

技术实现要素：

本发明的技术任务是针对以上不足之处，提供一种实用性强、优化vue前端表格组件渲染性能的方法及系统。

一种优化vue前端表格组件渲染性能的方法，其实现过程为：

一、首先配置一纵向滚动条，该滚动条高度与vue前端表格总高度相同；

二、滚动纵向滚动条，根据滚动高度计算当前需要渲染的数据条目并渲染。

所述步骤一中，配置纵向滚动条的具体过程为：

通过数据量与表格行高计算出表格总的高度，然后根据这个高度渲染出一个纵向滚动条放在表格左侧或右侧，该纵向滚动条的顶部、底部均与vue前端表格顶部、底部相平齐。

所述步骤二中的计算当前需要渲染的数据条目根据滚动条scrolltop和表格高度进行计算得出的，所述scrolltop是指某个可滚动区块向下滚动的距离。

所述步骤二中，根据当前滚动条的高度，计算数据列表的开始索引和结束索引，开始索引为上次滚动结束的位置，且渲染的表格为在浏览器中能看到的部分。

还包括步骤三：当滚动表格的时候，重置纵向滚动条的位置，使得下一次纵向滚动条滚动时是从表格当前位置开始计算。

一种优化vue前端表格组件渲染性能的系统，包括，

滚动模块，以滚动条的形式配置在vue前端表格一侧，且其高度与vue前端表格总高度相同；

计算模块，用于在滚动条滚动时，计算出需要渲染的数据条目；

渲染模块，根据计算模块计算的结果，对待渲染数据条目进行渲染。

所述滚动模块提供的滚动条为纵向滚动条，且其顶部、底部均与vue前端表格顶部、底部相平齐，并放置在表格左侧或右侧。

所述计算模块根据滚动条scrolltop和表格高度进行计算得出需要渲染的数据条目，所述scrolltop是指某个可滚动区块向下滚动的距离。

所述计算模块中计算得到的数据条目，是指根据当前滚动条的高度，计算数据列表的开始索引和结束索引，开始索引为上次滚动结束的位置。

所述渲染模块渲染的表格为在浏览器中能看到的、且为计算模块计算得出的数据条目。

本发明的一种优化vue前端表格组件渲染性能的方法及系统和现有技术相比，具有以下有益效果：

本发明的一种优化vue前端表格组件渲染性能的方法及系统，通过前端技术优化vue大数据的表格的前端渲染性能，适用于pc，移动app等展现表格的场景，解决大数据量情况下，vue表格组件的渲染性能问题，可以有效得提升应用性能，可以有效的减少表格渲染卡顿时间，保证页面能正常展现和使用，实用性更好，适用范围广泛，具有很好的推广应用价值。

附图说明

为了更清楚的说明本发明实施例或现有技术的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单的介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

附图1为本发明方法的实现示意图。

附图2为本发明系统的结构示意图。

具体实施方式

为了使本技术领域的人员更好地理解本发明的方案，下面结合具体实施方式对本发明作进一步的详细说明。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

如附图1、图2所示，一种优化vue前端表格组件渲染性能的方法，其实现过程为：

一、首先配置一纵向滚动条，该滚动条高度与vue前端表格总高度相同；

二、滚动纵向滚动条，根据滚动高度计算当前需要渲染的数据条目并渲染。

所述步骤一中，配置纵向滚动条的具体过程为：

通过数据量与表格行高计算出表格总的高度，然后根据这个高度渲染出一个纵向滚动条放在表格左侧或右侧，该纵向滚动条的顶部、底部均与vue前端表格顶部、底部相平齐。

所述步骤二中的计算当前需要渲染的数据条目根据滚动条scrolltop和表格高度进行计算得出的，所述scrolltop是指某个可滚动区块向下滚动的距离。

所述步骤二中，根据当前滚动条的高度，计算数据列表的开始索引和结束索引，开始索引为上次滚动结束的位置，且渲染的表格为在浏览器中能看到的部分。

还包括步骤三：当滚动表格的时候，重置纵向滚动条的位置，使得下一次纵向滚动条滚动时是从表格当前位置开始计算。

基于上述方法，实践如下：原vue表格组件在联想t470，chrome66.0.3359.181版本下，在行数300，列数70情形下，卡顿现象非常明显，通过该方案改造后，卡顿现象不再出现。理论上展现的数据量只受浏览器可用内存大小限制。

一种优化vue前端表格组件渲染性能的系统，包括，

滚动模块，以滚动条的形式配置在vue前端表格一侧，且其高度与vue前端表格总高度相同；

计算模块，用于在滚动条滚动时，计算出需要渲染的数据条目；

渲染模块，根据计算模块计算的结果，对待渲染数据条目进行渲染。

所述滚动模块提供的滚动条为纵向滚动条，且其顶部、底部均与vue前端表格顶部、底部相平齐，并放置在表格左侧或右侧。

所述计算模块根据滚动条scrolltop和表格高度进行计算得出需要渲染的数据条目，所述scrolltop是指某个可滚动区块向下滚动的距离。

所述计算模块中计算得到的数据条目，是指根据当前滚动条的高度，计算数据列表的开始索引和结束索引，开始索引为上次滚动结束的位置。

所述渲染模块渲染的表格为在浏览器中能看到的、且为计算模块计算得出的数据条目。

与现有技术相比，本发明只渲染表格在浏览器能看到的部分，节约了渲染大量dom的时间和内存，能够有效的在不适合分页的情形下展示大数据量表格。

通过上面具体实施方式，所述技术领域的技术人员可容易的实现本发明。但是应当理解，本发明并不限于上述的具体实施方式。在公开的实施方式的基础上，所述技术领域的技术人员可任意组合不同的技术特征，从而实现不同的技术方案。

除说明书所述的技术特征外，均为本专业技术人员的已知技术。

技术特征：

技术总结
本发明公开了一种优化Vue前端表格组件渲染性能的方法及系统，其实现过程为：首先配置一纵向滚动条，该滚动条高度与Vue前端表格总高度相同；滚动纵向滚动条，根据滚动高度计算当前需要渲染的数据条目并渲染。本发明的一种优化Vue前端表格组件渲染性能的方法及系统与现有技术相比，只渲染表格在浏览器能看到的部分，节约了渲染大量DOM的时间和内存，能够有效的在不适合分页的情形下展示大数据量表格。

技术研发人员：张文杰
受保护的技术使用者：浪潮软件股份有限公司
技术研发日：2018.07.02
技术公布日：2018.12.07