CN115686509A - 一种基于vue框架的树形结构数据渲染方法、装置和介质 - Google Patents

Abstract

本发明涉及一种基于VUE框架的树形结构数据渲染方法、装置和介质，方法包括：获取滚动事件触发指令，根据对应的当前树节点的展开折叠状态，计算页面上应展示的树节点个数，从而根据每个树节点项的高度，计算可滚动区域高度；根据可视区域高度和滚动事件触发指令对应的滚动条的位置，获取要渲染的节点，得到虚拟列表；当可视区域对应的虚拟列表内为同层级的树节点时，则在该虚拟列表内复用DOM结构；当可视区域对应的虚拟列表内存在不同层级的树节点时，则根据各个树节点的属性进行DOM结构的复用，并对不同层级的树节点DOM结构进行创建或删除，最后将树节点渲染到前端页面。与现有技术相比，本发明具有计算效率高、节点渲染迅速等优点。

Description

一种基于VUE框架的树形结构数据渲染方法、装置和介质

技术领域

本发明涉及数据处理技术领域，尤其是涉及一种基于VUE框架的树形结构数据渲染方法、装置和介质。

背景技术

随着大数据、云计算、人工智能等技术蓬勃发展，各行各业的信息量增加，数据量日益庞大，需要用到不同的展示方式。而树形控件是对某种数据层级关系的一种较好展示方式。前端轻量级、双向数据绑定的VUE框架，搭配Element UI中封装好的el-tree组件，可实现功能全面的树形控件。树形组件属于递归组件，当对任一节点进行操作时，都会调用树组件本身的递归方法。但是当树形控件的数据量大，树节点数据目多时，会出现页面加载缓慢，渲染速度慢，性能差等问题。由于在浏览器中操作DOM的代价非常大，DOM元素的增加、删除和修改与页面性能紧密相关。对树节点处理时，会递归遍历全部树形数据，若频繁进行DOM操作，如树形控件频繁的展开、折叠会多次进行重新构建，会造成浏览器卡顿，从而影响用户体验。如当页面上将5万个节点直接渲染到页面、某些父节点下的叶子节点数目为2000及以上时，容易导致页面崩溃，影响***功能。

现有技术中存在基于Element UI的el-table组件的pl-table大数据表格插件，支持无卡顿渲染万条以上大数据表格列表和5000数据量以内的嵌套树形数据的表格。使用pl-table虚拟滚动属性时，必须固定表格高度和行高。针对大数据量列表的处理，pl-table的原理步骤如下：

(1)固定表格高度和行高；(2)监听滚动条的滑动事件；(3)通过滑动距离计算出虚拟元素要渲染哪些子元素；(4)更新虚拟列表元素位置，滚动条不断滑动时，列表元素和位置也不断更新，实现虚拟滚动效果。

该方法通过分步加载，根据需要只有点击父节点时才会加载下一层级的子节点并渲染到页面上，解决大数据树形数据的加载缓慢问题。但是当某个或某些父节点下的子节点数量非常多的情况，仍需要渲染大量数据，同样存在页面卡顿、崩溃的情况。

另外，公开号为CN110825382A的发明公开了一种前端大数据树形结构展示方法，该方案通过将树形结构树进行扁平化管理，通过空间来换时间，达到快速渲染效果；和建立虚拟显示长度，减少渲染节点数量，达到大数据量渲染效果。方法如下：

确定需要进行前端展示树形结构的原数据，通过递归组件将原数据转换成DOM结构的一维扁平数组；

获取根节点DOM，并分成绝对定位的两个子节点；通过获取两个子节点高度、以及滚动条位置，获取展示虚拟列表长度，计算出需要展示的起始节点，以及结束节点。

该方案通过改变栈的存取方式，将递归转换为非递归实现。但其打破了父节点和子节点数据之间的关联，仅通过添加节点的位置路径等字段信息进行标识，树形组件的操作方法必须自定义方法来实现，当节点数据量很大时，依然有卡顿现象，查询算法复杂，优化难度高。该技术方法缺少树形控件本身集成的反选、拖拽、节点的新增、编辑和删除等功能，可应用的场景有限，复用性低，且其实现方式是采用jQuery的树形组件，维护成本高。

发明内容

本发明的目的就是为了克服上述现有技术存在基于VUE框架和el-tree组件的大数据量渲染的性能问题而提供一种基于VUE框架的树形结构数据渲染方法、装置和介质。

本发明的目的可以通过以下技术方案来实现：

根据本发明的第一方面，提供了一种基于VUE框架的树形结构数据渲染方法，包括以下步骤：

预先获取前端页面树形控件的可视区域高度和每个树节点项的高度；

获取滚动事件触发指令，根据该滚动事件触发指令对应的当前树节点的展开折叠状态，计算页面上应展示的树节点个数，从而根据所述每个树节点项的高度，计算可滚动区域高度；

根据可视区域高度和所述滚动事件触发指令对应的滚动条的位置，获取要渲染的节点，得到虚拟列表；

当可视区域对应的虚拟列表内为同层级的树节点时，则在该虚拟列表内复用DOM结构；当可视区域对应的虚拟列表内存在不同层级的树节点时，则根据各个树节点的属性进行DOM结构的复用，并对不同层级的树节点DOM结构进行创建或删除，最后将树节点渲染到前端页面。

进一步地，预先设置leafNum字段，作为树节点属性字段，所述leafNum字段用于标识每个树节点下的子节点数目；

页面上应展示的树节点个数的计算过程包括：

初始化页面上应展示的树节点个数m1为零，判断前端页面树形控件中第一个节点的状态，若为折叠状态，则m1加一，若为展开状态，则根据所述leafNum字段得到数目P，将m1加P+1，然后判断该展开状态的节点的子节点的状态，并进行m1值的累加，直至遍历完该展开状态的节点的所有子节点后，返回前端页面树形控件中的下一个节点进行m1值的累加，直至遍历完前端页面树形控件中的所有节点，得到页面上应展示的树节点个数。

进一步地，所述虚拟列表的建立过程包括：

根据所述滚动事件触发指令对应的当前时刻滚动距离和每个树节点项的高度，计算起始节点的位置，根据所述可视区域高度和每个树节点项的高度，计算终止节点的位置，将起始节点和终止节点之间的节点作为虚拟列表要渲染的节点，形成虚拟列表。

进一步地，预先设置isChild字段和level字段，作为树节点属性字段，所述isChild字段用于标识树节点是否为最后一层叶子节点；所述level字段用于标识当前树节点的层级；

对于level字段和isChild字段均一致的树节点，则复用DOM结构；针对不同层级树节点进行创建或删除。

进一步地，通过树形CSS样式在前端页面上展示虚拟列表内的树节点。

进一步地，实时监控各个树节点的展开状态和折叠状态，若出现状态变化，则重新计算可滚动区域高度和虚拟列表。

根据本发明的第二方面，提供了一种基于VUE框架的树形结构数据渲染装置，包括：

设置模块，用于设置前端页面树形控件的可视区域高度和每个树节点项的高度；根据滚动事件触发指令对应的当前树节点的展开折叠状态，计算页面上应展示的树节点个数，从而根据所述每个树节点项的高度，计算可滚动区域高度；根据可视区域高度和所述滚动事件触发指令对应的滚动条的位置，获取要渲染的节点，得到虚拟列表；并在DOM根节点添加可滚动区域容器与虚拟列表；可滚动区域容器的高度与真实列表的高度一致；虚拟列表的高度与所设置的可视区域高度一致；

虚拟模块，用于可滚动区域内虚拟列表的滚动操作，前端页面第一次加载的时候，只加载可视区域内需要的列表项，当页面发生滚动时，动态计算获得可视区域内的虚拟列表；

展示模块，用于当滚动事件触发时，由滚动事件及可视区域生成虚拟列表要渲染的节点，当可视区域对应的虚拟列表内为同层级的树节点时，则在该虚拟列表内复用DOM结构；当可视区域对应的虚拟列表内存在不同层级的树节点时，则根据各个树节点的属性进行DOM结构的复用，并对不同层级的树节点DOM结构进行创建或删除，最后将树节点渲染到前端页面。

进一步地，所述装置还包括：

数据模块，用于对树形结构数据递归遍历，给每个树节点追加disabled字段、isChild字段、leafNum字段和level字段；

所述disabled字段用于标识树节点是否为禁用状态；

所述isChild字段用于标识树节点是否为最后一层叶子节点；

所述leafNum字段用于标识每个树节点下的子节点数目；

所述level字段用于标识当前树节点的层级；

当树形组件需配合复选框使用时，所述disabled字段设置当前树节点是否可选择；若树形控件仅查看，则disabled字段设置为true；若树形控件节点的复选框可编辑，则disabled字段设置为false。

进一步地，页面上应展示的树节点个数的计算过程包括：

初始化页面上应展示的树节点个数m1为零，判断前端页面树形控件中第一个节点的状态，若为折叠状态，则m1加一，若为展开状态，则根据所述leafNum字段得到数目P，将m1加P+1，然后判断该展开状态的节点的子节点的状态，并进行m1值的累加，直至遍历完该展开状态的节点的所有子节点后，返回前端页面树形控件中的下一个节点进行m1值的累加，直至遍历完前端页面树形控件中的所有节点，得到页面上应展示的树节点个数；

对于level字段和isChild字段均一致的树节点，则复用DOM结构；针对不同层级树节点进行创建或删除。

根据本发明的第三方面，提供了一种计算机可读存储介质，所述计算机可读存储介质上储存有计算机程序，所述计算机程序被处理器执行如上所述的方法。

树形组件中树节点DOM元素的创建和渲染需要的时间成本很高，当父节点有大数据量的节点数目，将通过本发明方案能够减少树形数据的递归遍历、DOM的创建渲染以及页面的重构重绘。

与现有技术相比，本发明具有以下优点：

(1)本发明将el-tree组件的原始树形数据添加状态、属性字段，状态字段以标记选中、展开等状态，属性字段以标记节点层级、子节点数量及是否为最后一级叶子节点。方便不同层级的父子节点递归查找效率，提高查找或处理节点的计算效率。

(2)本发明采用虚拟树节点列表展示树节点数据。前端页面树形控件可视区域的高度和每个父子树节点项的高度一般都是固定的，但可滚动区域的高度根据树节点的展开折叠状态变化；因此通过树节点的展开折叠状态可计算出滚动区域的高度；设定虚拟列表的高度与树形控件可视区域的高度一致，通过虚拟滚动生成的虚拟树节点列表在页面展示树形控件，仅渲染可视区域以及可视区域上下部分树节点数据，控制VUE实例创建的数量、DOM结构节点渲染数量，使得页面渲染的DOM节点数量保持在较低水平，以达到快速渲染节点的效果，能支撑很大数据的渲染和功能。

(3)本发明采用DOM复用方法，节省页面重构和重绘时间。在树形结构的DOM中，同层级的树节点有相同的DOM嵌套结构；根据当前树节点层级、状态和属性执行动态DOM复用操作，针对可视区域内的状态和属性相同的同层级树节点可直接复用其DOM结构，对不同层级的树节点进行创建或删除；当虚拟树节点列表内为具有相同属性、状态的同层级树节点时，能最大化实现DOM复用；通过动态复用已有的DOM结构，减少DOM的创建删除操作，减少页面重构次数。

(4)本发明添加批量搜索功能，采用中英文逗号分隔多个搜索项的形式匹配搜索，一次性过滤出用户需要的多个树节点，以提高对大数据量树形结构的搜索效率。

(5)本发明针对树形控件的总节点数为5万及以上，父节点下有3000及以上个子节点时，提升对大数据量树形数据的渲染性能和过滤性能，页面展示不卡顿，并且在已有的el-tree组件上进行修改，保留组件本身自带的方法和属性，复用程度高。

附图说明

图1为本发明实施例中提供的一种基于VUE框架的树形结构数据渲染方法的流程示意图；

图2为本发明实施例中提供的一种基于VUE框架的树形结构数据渲染装置的结构示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。

因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

术语解释

DOM:文档对象模型(Document Object Model，DOM)是W3C制定的标准接口规范，是一种处理HTML和XML文件的标准API。DOM提供了对整个文档的访问模型，将文档作为一个带有元素、属性和文本的树形结构，DOM树结构精确地描述了HTML文档中标签间的相互关联性。HTML文档或XML文档被解析后，转化为DOM树，因此对HTML文档的处理可以通过对DOM树的操作实现。DOM模型不仅描述了文档的结构，还定义了结点对象的行为，利用对象的方法和属性，可以方便地访问、修改、添加和删除DOM树的结点和内容。由于在浏览器中操作DOM的代价是非常“昂贵”的，DOM元素的增加、删除和修改与页面性能紧密相关。

实施例1

本实施例提供一种基于VUE框架的树形结构数据渲染方法，包括以下步骤：

预先获取前端页面树形控件的可视区域高度和每个树节点项的高度；

获取滚动事件触发指令，根据该滚动事件触发指令对应的当前树节点的展开折叠状态，计算页面上应展示的树节点个数，从而根据所述每个树节点项的高度，计算可滚动区域高度；

根据可视区域高度和所述滚动事件触发指令对应的滚动条的位置，获取要渲染的节点，得到虚拟列表；

当可视区域对应的虚拟列表内为同层级的树节点时，则在该虚拟列表内复用DOM结构；当可视区域对应的虚拟列表内存在不同层级的树节点时，则根据各个树节点的属性进行DOM结构的复用，并对不同层级的树节点DOM结构进行创建或删除，最后将树节点渲染到前端页面。

本实施例中，在确定进行前端展示树形结构的原数据后，进行数据遍历进行树形数据的预处理操作，添加辅助字段如下：

disabled字段：树节点是否禁用状态标识，为true时表示当前树节点对应的复选框已禁用；为false表示当前树节点对应的复选框可选中或取消选中；

isChild字段：作为树节点属性字段，标识树节点是否为最后一层叶子节点。isChild为0时表示当前树节点为任意层级、包括若干子节点的父节点；为1时表示当前树节点为最后一级叶子节点。

leafNum字段：作为树节点属性字段，标识每个树节点下的子节点数目。最后一层叶子节点无子节点，则leafNum为0。

level字段：作为树节点的属性字段，标识当前树节点的层级。根节点的level为1，其它层级的树节点根据根节点递增。

将添加了辅助字段的树形数据绑定至Element UI的el-tree组件上。

具体地，本方法首先需要确定前端页面树形控件的可视区域高度h1,每个树节点项的高度h2和可滚动区域高度h3；h1和h2的高度是固定的，h3根据树节点的展开折叠状态动态变化。通过当前树节点的展开折叠状态，计算出理论上页面上应展示的树节点个数M，则得出h3＝M×h2。

可滚动区域高度h3的具体计算过程包括：

初始化页面上应展示的树节点个数m1为零，判断前端页面树形控件中第一个节点的状态，若为折叠状态，则m1加一，若为展开状态，则根据所述leafNum字段得到数目P，将m1加P+1，然后判断该展开状态的节点的子节点的状态，并进行m1值的累加，直至遍历完该展开状态的节点的所有子节点后，返回前端页面树形控件中的下一个节点进行m1值的累加，直至遍历完前端页面树形控件中的所有节点，得到页面上应展示的树节点个数。

本实施例中，通过可滚动区域，进行树节点的虚拟滚动操作。虚拟滚动的实现必须满足页面包括滚动列表容器、数据容器、数据项三层结构，根据滚动的位置重新渲染可见的列表元素。展开树节点时，当前页面展示的树节点溢出可视区域，展示滚动条，滚动事件触发后，根据可视区域高度h1、可滚动区域高度h3、滚动条的位置及当前树节点的disabled属性、isChild属性、leafNum属性，生成虚拟列表，作为要渲染的树节点列表。

具体地，所述虚拟列表的建立过程包括：

根据所述滚动事件触发指令对应的当前时刻滚动距离和每个树节点项的高度，计算起始节点的位置，根据所述可视区域高度和每个树节点项的高度，计算终止节点的位置，将起始节点和终止节点之间的节点作为虚拟列表要渲染的节点，形成虚拟列表。

本实施例根据树节点的层级level、状态和属性进行动态DOM复用操作。同层级树节点的DOM嵌套结构一致。当可视区域内为同层级的树节点时，树节点的所有属性和isChild属性一致，可直接复用其DOM结构；当可视区域有不同层级树节点时，根据属性实现DOM的部分复用，对不同层级的树节点DOM进行创建或删除，将树节点渲染到前端页面。

最后，为提升对大数据量树形数据的过滤性能。本发明方法采用前端设置筛选输入框，且支持多个筛选字段中英文逗号分隔，将输入的筛选字段作为查询参数传递给后端，由后端查询并统一返回结果。

实时监控各个树节点的展开状态和折叠状态，若出现状态变化，则重新计算可滚动区域高度和虚拟列表。

在以上工作中，最重要的是虚拟滚动的控制，以及动态计算监控树节点状态和属性实现动态DOM复用。虚拟滚动列表模拟出逼真的滚动效果，必须满足以下两个要求：

(1)虚拟滚动树节点列表的滚动条和普通树节点列表保持一致。

(2)虚拟滚动仅渲染可视窗口区域以及上下两侧的部分DOM元素。页面视图的内容随滚动条的上下滑动实时更新，保证视图区域的内容同普通渲染长列表时一致。

对虚拟列表的处理涉及“可滚动区域”“可视区域”两个概念。以使用虚拟滚动的列表为例进行介绍，可滚动区域指页面元素将页面撑起的最大高度，假设表格需要展示2000条数据，每个列表项的高度是30px，那么可滚动的区域的高度就是2000×30px。当用户改变列表的滚动条的当前滚动值的时候，会造成可见区域的内容的变更。可视区域指列表的高度是400px，右侧有纵向滚动条可以滚动，则400px就是可视区域。

本发明方案在具体实施时的主要流程如图1所示，包括：

1)确定进行前端展示树形结构的数据，遍历数据并进行原始树形数据的预处理操作，添加disabled和isChild辅助字段。数据模块接收原始树形数据，输出处理后的树形数据。设定生成的树形控件带有复选框且为非禁用状态，添加辅助字段的树形数据如下，并将处理后的数据绑定至el-tree上。

2)计算并设置可视区域高度、每个树节点的高度，并且作为设置模块的输出。

页面的展示高度等于可视区域高度h1，假设为570px。同一树形数据的每个父子树节点高度h2，通常为38px。虚拟列表的高度与可视化区域高度一致，为570px，因此当前可视区域内可查看到15个树节点。

3)通过可滚动区域，进行树节点的虚拟滚动操作。

当滚动事件触发时，计算可滚动区域的高度h3，根据滚动事件、可视区域高度、树节点展开和折叠状态计算并生成虚拟列表要渲染的节点。计算方法如下：

监听滚动条的滚动事件，通过当前树节点的展开折叠状态，得到理论上应该展示的节点个数m1，这些节点按顺序组成的节点列表list1。具体计算规则为：若节点为折叠状态即树节点中的expand＝false,则节点位置加1，再判断同层级其他节点；若节点为展开状态即expand＝true，则根据LeafNum属性得到该节点下的子节点数据节点位置，假设LeafNum＝P，则节点位置加P+1,再依次判断P个子节点的expand状态，根据expand状态值遍历完所有节点，依次循环加和。

计算可滚动区域的高度，为h3＝m1×h2，可滚动区域的高度根据节点的展开折叠状态动态变化。

计算滚动距离与树节点项高度的比值，得到m2,理论上起始节点前隐藏了m2个节点。

将m2映射到list1上，则在list1中的第m2+1个节点为起始节点，对应的位置为(m2+1)×h2。可视区域高度和每个树节点项高度都是固定的，第m2+(h1/h2)为终止节点，则对应的终止节点位置为(m2+1)×h2+h1。

起始节点和终止节点之间的节点为虚拟列表要渲染的节点，形成虚拟列表。

监控节点的展开折叠状态，若节点展开或折叠，那么滚动条位置变化，重新计算起始节点、终止节点、理论上应展示的个数m1，以及虚拟节点列表。

4)根据树节点的层级level、展开折叠状态和属性进行动态DOM复用操作。同层级树节点level值相同，DOM嵌套结构一致。当可视区域内有同层级的树节点时，树节点的所有属性和isChild属性一致时，可直接复用其DOM结构；针对不同层级树节进行创建或删除。通过动态DOM复用，减少页面上的DOM创建和删除，减少页面重构和重绘。

5)采用树形CSS样式在页面上展示虚拟列表内的树节点。

6)将多个用中文或英文逗号隔开的筛选条件输入到树形组件的筛选框内，页面上仅展示符合筛选条件的树节点。

以上是关于方法实施例的介绍，以下通过装置实施例，对本发明所述方案进行进一步说明。

如图2所示，本实施例还提供一种基于VUE框架的树形结构数据渲染装置，包括：

数据模块，用于准备el-tree树形组件所需的树形结构数据。将原始树形结构数据递归遍历，给每个树节点追加disabled字段、isChild字段、leafNum字段和level字段。当树形组件需配合复选框使用时，disabled字段可设置当前树节点是否可选择。若树形控件仅查看，则disabled字段设置为true；若树形控件节点的复选框可编辑，则disabled字段设置为false。为区分树节点的层级，设置最后一级叶子节点的isChild＝1，其它均为0，设置level的值，根节点对应的level＝1,其它依次递增。leafNum为节点下的子节点数据，若该节点下的无子节点，则leafNum＝0。预处理后的树形数据，添加了辅助字段，方便对节点的状态控制和父子节点的查找计算。

设置模块，用于设置前端页面树形控件的可视区域高度和每个树节点项的高度；根据滚动事件触发指令对应的当前树节点的展开折叠状态，计算页面上应展示的树节点个数，从而根据所述每个树节点项的高度，计算可滚动区域高度；根据可视区域高度和所述滚动事件触发指令对应的滚动条的位置，获取要渲染的节点，得到虚拟列表；并在DOM根节点添加可滚动区域容器与虚拟列表；可滚动区域容器的高度与真实列表的高度一致；虚拟列表的高度与所设置的可视区域高度一致；

虚拟模块，用于可滚动区域内虚拟列表的滚动操作，虚拟列表是处理滚动条滚动后的可见区域的变更，前端页面第一次加载的时候，只加载可视区域内需要的列表项，当页面发生滚动时，动态计算获得可视区域内的虚拟列表；

展示模块，用于当滚动事件触发时，由滚动事件及可视区域生成虚拟列表要渲染的节点，再根据当前树节点层级level、状态和属性进行动态DOM复用，并在虚拟列表展示所述节点。针对可视区域内状态和属性相同的同层级树节点，可直接复用其DOM结构，而针对不同层级的树节点则进行创建或删除。通过监听页面树形控件节点状态和事件(如改变节点选中状态)，利用变更虚拟DOM对象间接操作真实DOM。

过滤模块，用于支持用户输入多个筛选条件，实现批量搜索功能，仅展示需要的节点内容。

在本发明的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行***、装置或设备使用或与指令执行***、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体***、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

以上详细描述了本发明的较佳具体实施例。应当理解，本领域的普通技术人员无需创造性劳动就可以根据本发明的构思做出诸多修改和变化。因此，凡本技术领域中技术人员依本发明的构思在现有技术的基础上通过逻辑分析、推理或者有限的实验可以得到的技术方案，皆应在由权利要求书所确定的保护范围内。

Claims (10)

1.一种基于VUE框架的树形结构数据渲染方法，其特征在于，包括以下步骤：

预先获取前端页面树形控件的可视区域高度和每个树节点项的高度；

获取滚动事件触发指令，根据该滚动事件触发指令对应的当前树节点的展开折叠状态，计算页面上应展示的树节点个数，从而根据所述每个树节点项的高度，计算可滚动区域高度；

根据可视区域高度和所述滚动事件触发指令对应的滚动条的位置，获取要渲染的节点，得到虚拟列表；

当可视区域对应的虚拟列表内为同层级的树节点时，则在该虚拟列表内复用DOM结构；当可视区域对应的虚拟列表内存在不同层级的树节点时，则根据各个树节点的属性进行DOM结构的复用，并对不同层级的树节点DOM结构进行创建或删除，最后将树节点渲染到前端页面。

2.根据权利要求1所述的一种基于VUE框架的树形结构数据渲染方法，其特征在于，预先设置leafNum字段，作为树节点属性字段，所述leafNum字段用于标识每个树节点下的子节点数目；

页面上应展示的树节点个数的计算过程包括：

初始化页面上应展示的树节点个数m1为零，判断前端页面树形控件中第一个节点的状态，若为折叠状态，则m1加一，若为展开状态，则根据所述leafNum字段得到数目P，将m1加P+1，然后判断该展开状态的节点的子节点的状态，并进行m1值的累加，直至遍历完该展开状态的节点的所有子节点后，返回前端页面树形控件中的下一个节点进行m1值的累加，直至遍历完前端页面树形控件中的所有节点，得到页面上应展示的树节点个数。

3.根据权利要求1所述的一种基于VUE框架的树形结构数据渲染方法，其特征在于，所述虚拟列表的建立过程包括：

根据所述滚动事件触发指令对应的当前时刻滚动距离和每个树节点项的高度，计算起始节点的位置，根据所述可视区域高度和每个树节点项的高度，计算终止节点的位置，将起始节点和终止节点之间的节点作为虚拟列表要渲染的节点，形成虚拟列表。

4.根据权利要求1所述的一种基于VUE框架的树形结构数据渲染方法，其特征在于，预先设置isChild字段和level字段，作为树节点属性字段，所述isChild字段用于标识树节点是否为最后一层叶子节点；所述level字段用于标识当前树节点的层级；

对于level字段和isChild字段均一致的树节点，则复用DOM结构；针对不同层级树节点进行创建或删除。

5.根据权利要求1所述的一种基于VUE框架的树形结构数据渲染方法，其特征在于，通过树形CSS样式在前端页面上展示虚拟列表内的树节点。

6.根据权利要求1所述的一种基于VUE框架的树形结构数据渲染方法，其特征在于，实时监控各个树节点的展开状态和折叠状态，若出现状态变化，则重新计算可滚动区域高度和虚拟列表。

7.一种基于VUE框架的树形结构数据渲染装置，其特征在于，包括：

设置模块，用于设置前端页面树形控件的可视区域高度和每个树节点项的高度；根据滚动事件触发指令对应的当前树节点的展开折叠状态，计算页面上应展示的树节点个数，从而根据所述每个树节点项的高度，计算可滚动区域高度；根据可视区域高度和所述滚动事件触发指令对应的滚动条的位置，获取要渲染的节点，得到虚拟列表；并在DOM根节点添加可滚动区域容器与虚拟列表；可滚动区域容器的高度与真实列表的高度一致；虚拟列表的高度与所设置的可视区域高度一致；

虚拟模块，用于可滚动区域内虚拟列表的滚动操作，前端页面第一次加载的时候，只加载可视区域内需要的列表项，当页面发生滚动时，动态计算获得可视区域内的虚拟列表；

展示模块，用于当滚动事件触发时，由滚动事件及可视区域生成虚拟列表要渲染的节点，当可视区域对应的虚拟列表内为同层级的树节点时，则在该虚拟列表内复用DOM结构；当可视区域对应的虚拟列表内存在不同层级的树节点时，则根据各个树节点的属性进行DOM结构的复用，并对不同层级的树节点DOM结构进行创建或删除，最后将树节点渲染到前端页面。

8.根据权利要求7所述的一种基于VUE框架的树形结构数据渲染装置，其特征在于，所述装置还包括：

数据模块，用于对树形结构数据递归遍历，给每个树节点追加disabled字段、isChild字段、leafNum字段和level字段；

所述disabled字段用于标识树节点是否为禁用状态；

所述isChild字段用于标识树节点是否为最后一层叶子节点；

所述leafNum字段用于标识每个树节点下的子节点数目；

所述level字段用于标识当前树节点的层级；

当树形组件需配合复选框使用时，所述disabled字段设置当前树节点是否可选择；若树形控件仅查看，则disabled字段设置为true；若树形控件节点的复选框可编辑，则disabled字段设置为false。

9.根据权利要求8所述的一种基于VUE框架的树形结构数据渲染装置，其特征在于，页面上应展示的树节点个数的计算过程包括：

初始化页面上应展示的树节点个数m1为零，判断前端页面树形控件中第一个节点的状态，若为折叠状态，则m1加一，若为展开状态，则根据所述leafNum字段得到数目P，将m1加P+1，然后判断该展开状态的节点的子节点的状态，并进行m1值的累加，直至遍历完该展开状态的节点的所有子节点后，返回前端页面树形控件中的下一个节点进行m1值的累加，直至遍历完前端页面树形控件中的所有节点，得到页面上应展示的树节点个数；

对于level字段和isChild字段均一致的树节点，则复用DOM结构；针对不同层级树节点进行创建或删除。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上储存有计算机程序，所述计算机程序被处理器执行如权利要求1～6中任一项所述的方法。

Images