CN116628272B - 一种基于vue框架的树形结构节点快速选择方法 - Google Patents

Abstract

本发明公开了一种基于vue框架的树形结构节点快速选择方法，属于Web应用系统开发技术领域，包括：在组件el‑tree中添加selected属性，获取已封装的树形结构列表数据，初始化组件el‑tree；任一节点被触发时，根据其父节点id初始化本级列表，筛选出本级列表中选中的节点并封装在selected属性中；根据优化的懒加载loadNode方法递归筛选选中节点的子级节点，使用DOM元素的setChecked方法根据selected中存储的节点设置前端节点选中状态。本发明实现了动态获取树形结构每一层级的数据并显示，在编辑查看数据时回显对应的层级关系，解决了一次性加载渲染缓慢、浏览卡顿的问题。

Description

一种基于vue框架的树形结构节点快速选择方法

技术领域

本发明属于Web应用系统开发技术领域，具体涉及一种基于vue框架的树形结构节点快速选择方法。

背景技术

随着大数据、云计算、ChatGPT人工智能等技术蓬勃发展，各行各业的信息量、数据量日益庞大，这些数据需要用到不同的展示方式，而树形结构可以完整展现层级关系，并具有滚动、展开、收起、选择等交互功能，无疑是具有数据层级关系的信息的一种更直观、快捷的展示方式。

树形组件属于递归组件，当对任一节点进行操作时，都会调用树形组件本身的递归方法，传统的树形结构初始化选中项时，树形结构是后台服务一次性获取发送给前端Web组件，经过ElementUI库中的el-tree树形组件渲染后，页面的DOM元素会有很多，每一个DOM元素上均会产生递归交互事件，若频繁进行dom操作，如树形控件的频繁展开，在数据节点层级较多，数据量较大的场景中，大量数据会传入树形组件，会出现页面加载缓慢、渲染速度慢、性能差等问题，造成浏览器卡顿，影响用户体验。

发明内容

为了解决上述问题，本发明提出了一种基于vue框架的树形结构节点快速选择方法，实现动态获取树形结构每一层级的数据并显示，解决一次性加载和渲染导致加载渲染缓慢、浏览卡顿的问题。

本发明解决其技术问题采取的技术方案是：

一种基于vue框架的树形结构节点快速选择方法，包括以下步骤：

S1、在组件el-tree中添加selected属性，用于存储选中的节点，获取已封装的树形结构列表数据，初始化组件el-tree；

S2、任一节点被触发时，根据其父节点id初始化本级列表，筛选出本级列表中选中的节点并封装在selected属性中；

S3、根据优化的懒加载loadNode方法递归筛选选中节点的子级节点，使用DOM元素的setChecked方法根据selected中存储的节点设置前端节点选中状态，完成渲染。

进一步的，组件el-tree中还添加有一个v-on:check事件监听器，在用户选择或取消选择节点时更新selected属性。

进一步的，当用户选择或取消选择节点时，重复执行步骤S2和S3的操作。

进一步的，步骤S2包括：

根据触发节点的父节点id初始化本级列表，调用数据接口加载本级列表数据；

对本级列表中各节点子级节点的选中状态进行校验核准，判断本级列表中节点的选中状态，将选中节点的数据封装成节点对象，并将封装的节点对象压入数据堆栈；

将装载有时间顺序的数据堆栈封装存储在selected属性中，跟随列表一同返回至前端。

进一步的，对本级列表中各节点子级节点的选中状态进行校验核准时，若节点无子节点，则直接根据其选中状态进行封装。

进一步的，节点对象包括属性：父节点主键parentId、自身节点主键id、节点名称name、是否是叶子节点isLeaf、节点等级level、选中状态status和映射的要加载的子节点集合children。

进一步的，选中状态status根据节点对应的子节点信息设置，分别为不选中、全选和半选。

进一步的，在初始化本级数据列表前，对el-tree组件中属性进行优化，至少包括初始化初始值defaultProps，设置唯一识别id，设置树的折叠属性。

进一步的，步骤S3包括：

触发懒加载loadNode方法，对选中节点进行子节点判断，条件均满足时，与后台服务建立连接请求，返回对应子节点数据；

根据封装在selected属性中节点的选中状态，设定前端网页各节点的选中状态。

本发明实施例的技术方案可以具有的有益效果如下：

（1）将el-tree组件暴露在外的属性、自定义方法loadNode进行修改优化，对无需进行懒加载的节点进行拦截，从而控制不必要的服务调用，提高了不同层级的父子节点递归函数查找效率，增强了查找或处理节点的计算效率。

（2）使用Lazy懒加载，仅在需要时加载资源，而不是一次性加载所有资源，极大地提高了性能。

（3）后台服务根据Web前端所需要数据进行封装，对封装入栈的对象的属性进行了优化，并对后台服务读取数据采用效率更高的栈读取，使vue接受到从堆栈读取的数据后能快速进行检索，进行相关属性的赋值，减少前端分析耗时，提高显示效率。

本申请在数据量庞大的情况下，实现了动态获取树形结构每一层级的数据并显示，同时在编辑查看数据时回显对应的层级关系，解决一次加载、渲染，导致加载渲染缓慢、浏览卡顿的问题。

附图说明

图1是根据一示例性实施例示出的一种基于vue框架的树形结构节点快速选择方法的流程图；

图2是根据一示例性实施例示出的封装的节点对象压入数据堆栈的示意图。

具体实施方式

下面结合附图与实施例对本发明做进一步说明：

为能清楚说明本方案的技术特点，下面通过具体实施方式，并结合其附图，对本发明进行详细阐述。下文的公开提供了许多不同的实施例或例子用来实现本发明的不同结构。为了简化本发明的公开，下文中对特定例子的部件和设置进行描述。此外，本发明可以在不同例子中重复参考数字和/或字母。这种重复是为了简化和清楚的目的，其本身不指示所讨论各种实施例和/或设置之间的关系。应当注意，在附图中所图示的部件不一定按比例绘制。本发明省略了对公知组件和处理技术及工艺的描述以避免不必要地限制本发明。

如图1所示，本发明实施例提供的一种基于vue框架的树形结构节点快速选择方法，包括以下步骤：

S1、在组件el-tree中添加selected属性，用于存储选中的节点，获取已封装的树形结构列表数据，初始化组件el-tree。

所述获取已封装的树形结构列表数据，通过调用钩子函数created，使用axios或其他HTTP库与后台服务建立连接，已封装的树形结构列表默认值为树形结构一级列表。

S2、任一节点被触发时，根据其父节点id初始化本级列表，筛选出本级列表中选中的节点并封装在selected属性中。

在初始化本级列表前，对el-tree组件中属性进行优化，至少包括初始化初始值defaultProps：{children: 'children',label: 'label'}，设置唯一识别id：node-key，设置树的折叠属性：default-expand-all=false。

当展开或选中节点时，节点被触发，根据触发节点的父节点id初始化本级列表，通过axios函数调用数据接口加载本级列表数据，所述本级列表为触发节点的父节点下所有与触发节点同等级节点构成的列表。

对本级列表中各节点子级节点的选中状态进行校验核准，判断本级列表中节点的选中状态，将选中节点的数据封装成节点对象，并将封装的节点对象压入数据堆栈，对本级列表中各节点子级节点的选中状态进行校验核准时，若节点无子节点，则直接根据其选中状态进行封装。

节点对象包括属性：父节点主键parentId、自身节点主键id、节点名称name、是否是叶子节点isLeaf、节点等级level、选中状态status和映射的要加载的子节点集合children，第一级列表的level设置为0，其父节点id为默认值空串。

选中状态status根据节点对应的子节点信息设置，分别为不选中、全选和半选，节点的子节点全部为不选中状态，则节点为不选中，设置为0，节点的子节点全部为选中状态，则节点为全选，设置为1，节点的子节点部分为选中状态，则节点为半选，设置为2。

在判断节点选中状态时，全选和半选节点都为选中状态并进行封装。

如图2所示，将封装的节点对象压入数据堆栈时，若封装的节点为n1、n2、n3，则首先将节点n1、n2、n3根据节点顺序从库中取出，然后按顺序对节点进行筛选，通过父级和子级节点判断筛选节点状态为全选或半选的节点，将其封装并将按顺序压入数据堆栈，即n1、n2、n3的顺序压入，由于堆栈有后进先出的规则，从堆栈中提取节点的顺序为n3、n2、n1，从而使前端处理数据具有有序性，vue接受到从堆栈读取的数据后能快速进行检索，进行相关属性的赋值。

将装载有时间顺序的数据堆栈封装存储在selected属性中，跟随列表一同返回至前端。

S3、根据优化的懒加载loadNode方法递归筛选选中节点的子级节点，使用DOM元素的setChecked方法根据selected中存储的节点设置前端节点选中状态，完成渲染。

在el-tree组件的mounted钩子函数中，使用$refs属性获取el-tree组件的DOM元素。

触发懒加载loadNode方法，点击某个节点时，如果这个节点不是叶子节点，则会再次触发此函数获取其子级节点数据，同时对无需进行懒加载的节点进行拦截，从而控制不必要的服务调用，对选中节点进行子节点判断，判断包括叶子节点判断node.isLeaf，子节点个数判断node.children.length，节点等级判断node.level，若选中节点具有子节点，且子节点需要展示，则判断满足条件，条件均满足时，与后台服务建立连接请求，返回对应子节点数据并在前端页面展示。

作为本实施例一种可能的实现方式，节点n1{id，isLeaf=true，name，parentId，status=1，level=1，children }、n2{id，isLeaf=false，name，parentId，status=1,level=1，children=0 }、n3{id，isLeaf=false，name，parentId，status=1,level=3，children }、n4{id，isLeaf=false，name，parentId，status=1,level=1，children }，节点n1是叶子节点(isLeaf=true)，触发懒加载方法不请求后台服务；节点n2无子节点 (children.lenght=0)，触发懒加载方法不请求后台服务；如存在level=3的节点其子节点并未设置完成的情况时，可以设置level=3的节点子节点无需展示，节点n3根据需求无需展示子节点(level=3)，触发懒加载方法不请求后台服务，同时也可以根据节点等级，设置触发节点时，子节点的展开层数；在本实施例中，所叶子节点是指节点等级最低的节点，无子节点的节点是指节点等级并非最低但无子节点的节点；综上，节点n1、n2、n3无需请求后台服务；节点n4并非叶子节点，根据节点等级判断子节点也需要展示，属于正常节点，触发懒加载方法与后台服务建立连接，返回对应节点及子节点数据。

根据封装在selected属性中节点的选中状态，使用setChecked方法设定前端网页各节点的选中状态，setChecked方法不仅根据selected中存储节点的选中状态对本级列表的选中状态进行设置，还相应的修改所有父节点（父节点及以此类推的父节点的父节点）和所有子节点（子节点及以此类推的子节点的子节点）的选中状态，若本级列表有设置为全选或半选的节点，则根据本级列表所有节点选中情况相应的设置所有父节点选中状态为全选或半选；若本级列表中有取消选中的节点，则设置其全部子节点选中状态为不选中，根据本级列表所有节点选中情况，设置所有父节点选中状态为半选或不选，选中（状态1）：node.setChecked(true)，半选（状态2）：node.indeterminate=true，不选中（状态0）不做任何处理，从而完成本级列表数据的展示。

组件el-tree中还添加有一个v-on:check事件监听器，在用户选择或取消选择节点时更新selected属性。

所述v-on:check事件监听器为watch侦听器，watch可以监控一个值的变换,并调用因为变化需要执行的方法，可以通过watch动态改变关联的状态，在vue实例中添加一个watch，来监测selected属性的变化，在用户选择或取消选择节点时更新selected属性，当用户选择或取消节点时，重复执行步骤S2和S3的操作。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质（包括但不限于磁盘存储器、CD-ROM、光学存储器等）上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备（系统）、和计算机程序产品的流程图和／或方框图来描述的。应理解可由计算机程序指令实现流程图和／或方框图中的每一流程和／或方框、以及流程图和／或方框图中的流程和／或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的步骤。

最后应当说明的是：以上实施例仅用以说明本发明的技术方案而非对其限制，尽管参照上述实施例对本发明进行了详细的说明，所属领域的普通技术人员应当理解：依然可以对本发明的具体实施方式进行修改或者等同替换，而未脱离本发明精神和范围的任何修改或者等同替换，其均应涵盖在本发明的权利要求保护范围之内。

Claims (8)

1.一种基于vue框架的树形结构节点快速选择方法，其特征在于，包括以下步骤：

S1、在组件el-tree中添加selected属性，用于存储选中的节点，获取已封装的树形结构列表数据，初始化组件el-tree；

S2、任一节点被触发时，根据其父节点id初始化本级列表，筛选出本级列表中选中的节点并封装在selected属性中，所述本级列表为触发节点的父节点下所有与触发节点同等级节点构成的列表；

S3、根据优化的懒加载loadNode方法递归筛选选中节点的子级节点，使用DOM元素的setChecked方法根据selected中存储的节点设置前端节点选中状态，完成渲染；

步骤S2包括：

根据触发节点的父节点id初始化本级列表，调用数据接口加载本级列表数据；

对本级列表中各节点子级节点的选中状态进行校验核准，判断本级列表中节点的选中状态，将选中节点的数据封装成节点对象，并将封装的节点对象压入数据堆栈；

将装载有时间顺序的数据堆栈封装存储在selected属性中，跟随列表一同返回至前端；

触发懒加载loadNode方法，点击某个节点时，如果这个节点不是叶子节点，则会再次触发此函数获取其子级节点数据，同时对无需进行懒加载的节点进行拦截，从而控制不必要的服务调用，对选中节点进行子节点判断，判断包括叶子节点判断node.isLeaf，子节点个数判断node.children.length，节点等级判断node.level，若选中节点具有子节点，且子节点需要展示，则判断满足条件，条件均满足时，与后台服务建立请求连接，返回对应子节点数据并在前端页面展示。

2.根据权利要求1所述的一种基于vue框架的树形结构节点快速选择方法，其特征在于，组件el-tree中还添加有一个v-on:check事件监听器，在用户选择或取消选择节点时更新selected属性。

3.根据权利要求2所述的一种基于vue框架的树形结构节点快速选择方法，其特征在于，当用户选择或取消选择节点时，重复执行步骤S2和S3的操作。

4.根据权利要求1所述的一种基于vue框架的树形结构节点快速选择方法，其特征在于，对本级列表中各节点子级节点的选中状态进行校验核准时，若节点无子节点，则直接根据其选中状态进行封装。

5.根据权利要求4所述的一种基于vue框架的树形结构节点快速选择方法，其特征在于，节点对象包括属性：父节点主键parentId、自身节点主键id、节点名称name、是否是叶子节点isLeaf、节点等级level、选中状态status和映射的要加载的子节点集合children。

6.根据权利要求5所述的一种基于vue框架的树形结构节点快速选择方法，其特征在于，选中状态status根据节点对应的子节点信息设置，分别为不选中、全选和半选。

7.根据权利要求1所述的一种基于vue框架的树形结构节点快速选择方法，其特征在于，在初始化本级数据列表前，对el-tree组件中属性进行优化，至少包括初始化初始值defaultProps，设置唯一识别id，设置树的折叠属性。

8.根据权利要求1所述的一种基于vue框架的树形结构节点快速选择方法，其特征在于，步骤S3包括：

触发懒加载loadNode方法，对选中节点进行子节点判断，条件均满足时，与后台服务建立连接请求，返回对应子节点数据；

根据封装在selected属性中节点的选中状态，设定前端网页各节点的选中状态。