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

权利要求书

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

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

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

2.根据权利要求1所述的一种优化Vue前端表格组件渲染性能的方法，其特征在于，所述步骤一中，配置纵向滚动条的具体过程为：

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

3.根据权利要求1所述的一种优化Vue前端表格组件渲染性能的方法，其特征在于，所述步骤二中的计算当前需要渲染的数据条目根据滚动条scrollTop和表格高度进行计算得出的，所述scrollTop是指某个可滚动区块向下滚动的距离。

4.根据权利要求1所述的一种优化Vue前端表格组件渲染性能的方法，其特征在于，所述步骤二中，根据当前滚动条的高度，计算数据列表的开始索引和结束索引，开始索引为上次滚动结束的位置，且渲染的表格为在浏览器中能看到的部分。

5.根据权利要求1所述的一种优化Vue前端表格组件渲染性能的方法，其特征在于，还包括步骤三：当滚动表格的时候，重置纵向滚动条的位置，使得下一次纵向滚动条滚动时是从表格当前位置开始计算。

6.一种优化Vue前端表格组件渲染性能的系统，其特征在于，包括，

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

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

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

7.根据权利要求6所述的一种优化Vue前端表格组件渲染性能的系统，其特征在于，所述滚动模块提供的滚动条为纵向滚动条，且其顶部、底部均与Vue前端表格顶部、底部相平齐，并放置在表格左侧或右侧。

8.根据权利要求6所述的一种优化Vue前端表格组件渲染性能的系统，其特征在于，所述计算模块根据滚动条scrollTop和表格高度进行计算得出需要渲染的数据条目，所述scrollTop是指某个可滚动区块向下滚动的距离。

9.根据权利要求6所述的一种优化Vue前端表格组件渲染性能的系统，其特征在于，所述计算模块中计算得到的数据条目，是指根据当前滚动条的高度，计算数据列表的开始索引和结束索引，开始索引为上次滚动结束的位置。

10.根据权利要求6所述的一种优化Vue前端表格组件渲染性能的系统，其特征在于，所述渲染模块渲染的表格为在浏览器中能看到的、且为计算模块计算得出的数据条目。