[发明专利]一种基于vue框架的树形结构节点快速选择方法

权利要求书

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初始化本级列表，调用数据接口加载本级列表数据；

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

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

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

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

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

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

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

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

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