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

本发明专利技术公开了一种基于vue框架的树形结构节点快速选择方法，属于Web应用系统开发技术领域，包括：在组件el

【技术实现步骤摘要】
一种基于vue框架的树形结构节点快速选择方法


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

技术介绍

[0002]随着大数据、云计算、ChatGPT人工智能等技术蓬勃发展，各行各业的信息量、数据量日益庞大，这些数据需要用到不同的展示方式，而树形结构可以完整展现层级关系，并具有滚动、展开、收起、选择等交互功能，无疑是具有数据层级关系的信息的一种更直观、快捷的展示方式。
[0003]树形组件属于递归组件，当对任一节点进行操作时，都会调用树形组件本身的递归方法，传统的树形结构初始化选中项时，树形结构是后台服务一次性获取发送给前端Web组件，经过ElementUI库中的el
‑
tree树形组件渲染后，页面的DOM元素会有很多，每一个DOM元素上均会产生递归交互事件，若频繁进行dom操作，如树形控件的频繁展开，在数据节点层级较多，数据量较大的场景中，大量数据会传入树形组件，会出现页面加载缓慢、渲染速度慢、性能差等问题，造成浏览器卡顿，影响用户体验。

技术实现思路

[0004]为了解决上述问题，本专利技术提出了一种基于vue框架的树形结构节点快速选择方法，实现动态获取树形结构每一层级的数据并显示，解决一次性加载和渲染导致加载渲染缓慢、浏览卡顿的问题。
[0005]本专利技术解决其技术问题采取的技术方案是：一种基于vue框架的树形结构节点快速选择方法，包括以下步骤：S1、在组件el
‑
tree中添加selected属性，用于存储选中的节点，获取已封装的树形结构列表数据，初始化组件el
‑
tree；S2、任一节点被触发时，根据其父节点id初始化本级列表，筛选出本级列表中选中的节点并封装在selected属性中；S3、根据优化的懒加载loadNode方法递归筛选选中节点的子级节点，使用DOM元素的setChecked方法根据selected中存储的节点设置前端节点选中状态，完成渲染。
[0006]进一步的，组件el
‑
tree中还添加有一个v
‑
on:check事件监听器，在用户选择或取消选择节点时更新selected属性。
[0007]进一步的，当用户选择或取消选择节点时，重复执行步骤S2和S3的操作。
[0008]进一步的，步骤S2包括：根据触发节点的父节点id初始化本级列表，调用数据接口加载本级列表数据；对本级列表中各节点子级节点的选中状态进行校验核准，判断本级列表中节点的选中状态，将选中节点的数据封装成节点对象，并将封装的节点对象压入数据堆栈；将装载有时间顺序的数据堆栈封装存储在selected属性中，跟随列表一同返回至
前端。
[0009]进一步的，对本级列表中各节点子级节点的选中状态进行校验核准时，若节点无子节点，则直接根据其选中状态进行封装。
[0010]进一步的，节点对象包括属性：父节点主键parentId、自身节点主键id、节点名称name、是否是叶子节点isLeaf、节点等级level、选中状态status和映射的要加载的子节点集合children。
[0011]进一步的，选中状态status根据节点对应的子节点信息设置，分别为不选中、全选和半选。
[0012]进一步的，在初始化本级数据列表前，对el
‑
tree组件中属性进行优化，至少包括初始化初始值defaultProps，设置唯一识别id，设置树的折叠属性。
[0013]进一步的，步骤S3包括：触发懒加载loadNode方法，对选中节点进行子节点判断，条件均满足时，与后台服务建立连接请求，返回对应子节点数据；根据封装在selected属性中节点的选中状态，设定前端网页各节点的选中状态。
[0014]本专利技术实施例的技术方案可以具有的有益效果如下：（1）将el
‑
tree组件暴露在外的属性、自定义方法loadNode进行修改优化，对无需进行懒加载的节点进行拦截，从而控制不必要的服务调用，提高了不同层级的父子节点递归函数查找效率，增强了查找或处理节点的计算效率。
[0015]（2）使用Lazy懒加载，仅在需要时加载资源，而不是一次性加载所有资源，极大地提高了性能。
[0016]（3）后台服务根据Web前端所需要数据进行封装，对封装入栈的对象的属性进行了优化，并对后台服务读取数据采用效率更高的栈读取，使vue接受到从堆栈读取的数据后能快速进行检索，进行相关属性的赋值，减少前端分析耗时，提高显示效率。
[0017]本申请在数据量庞大的情况下，实现了动态获取树形结构每一层级的数据并显示，同时在编辑查看数据时回显对应的层级关系，解决一次加载、渲染，导致加载渲染缓慢、浏览卡顿的问题。
附图说明
[0018]图1是根据一示例性实施例示出的一种基于vue框架的树形结构节点快速选择方法的流程图；图2是根据一示例性实施例示出的封装的节点对象压入数据堆栈的示意图。
具体实施方式
[0019]下面结合附图与实施例对本专利技术做进一步说明：为能清楚说明本方案的技术特点，下面通过具体实施方式，并结合其附图，对本专利技术进行详细阐述。下文的公开提供了许多不同的实施例或例子用来实现本专利技术的不同结构。为了简化本专利技术的公开，下文中对特定例子的部件和设置进行描述。此外，本专利技术可以在不同例子中重复参考数字和/或字母。这种重复是为了简化和清楚的目的，其本身不指示所讨论各种实施例和/或设置之间的关系。应当注意，在附图中所图示的部件不一定按比例
绘制。本专利技术省略了对公知组件和处理技术及工艺的描述以避免不必要地限制本专利技术。
[0020]如图1所示，本专利技术实施例提供的一种基于vue框架的树形结构节点快速选择方法，包括以下步骤：S1、在组件el
‑
tree中添加selected属性，用于存储选中的节点，获取已封装的树形结构列表数据，初始化组件el
‑
tree。
[0021]所述获取已封装的树形结构列表数据，通过调用钩子函数created，使用axios或其他HTTP库与后台服务建立连接，已封装的树形结构列表默认值为树形结构一级列表。
[0022]S2、任一节点被触发时，根据其父节点id初始化本级列表，筛选出本级列表中选中的节点并封装在selected属性中。
[0023]在初始化本级列表前，对el
‑
tree组件中属性进行优化，至少包括初始化初始值defaultProps：{children: 'children',label: 'label'}，设置唯一识别id：node
‑
key，设置树的折叠属性：default
‑
expand
‑
all=false。
[0024]当展开或选中节点时，节点被触发，根据触发节点的父节点id初始化本级列表，通过axios函数调用本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于vue框架的树形结构节点快速选择方法，其特征在于，包括以下步骤：S1、在组件el
‑
tree中添加selected属性，用于存储选中的节点，获取已封装的树形结构列表数据，初始化组件el
‑
tree；S2、任一节点被触发时，根据其父节点id初始化本级列表，筛选出本级列表中选中的节点并封装在selected属性中；S3、根据优化的懒加载loadNode方法递归筛选选中节点的子级节点，使用DOM元素的setChecked方法根据selected中存储的节点设置前端节点选中状态，完成渲染。2.根据权利要求1所述的一种基于vue框架的树形结构节点快速选择方法，其特征在于，组件el
‑
tree中还添加有一个v
‑
on:check事件监听器，在用户选择或取消选择节点时更新selected属性。3.根据权利要求2所述的一种基于vue框架的树形结构节点快速选择方法，其特征在于，当用户选择或取消选择节点时，重复执行步骤S2和S3的操作。4.根据权利要求1所述的一种基于vue框架的树形结构节点快速选择方法，其特征在于，步骤S2包括：根据触发节点的父节点id初始化本级列表，调用数据接口加载本级列表数据；对本级列表中各节点子级节点的选中状态进行校验核准，判断本级列表中节点的选中状态，将选中节点的数据封装成节点对象，并将封装的节点对象压入数据堆栈；...

【专利技术属性】
技术研发人员：张洪杰，陈清雷，郑曦，陈桂会，隆龙，王光永，
申请(专利权)人：海看网络科技山东股份有限公司，
类型：发明
国别省市：