[发明专利]一种优化Vue前端表格组件渲染性能的方法及系统

说明书

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

技术领域

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

背景技术

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

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

发明内容

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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