【亲测免费】 🌳 Vue-Tree-Halower：强大的Vue树形组件

Vue-Tree-Halower 是一款功能丰富、易于使用的Vue树形组件，适用于各种需要树形结构展示和操作的Web应用场景。本文将详细介绍该项目的特点、技术分析及其应用场景，帮助您更好地了解和使用这款优秀的开源组件。

项目介绍

Vue-Tree-Halower 提供了灵活的树形结构展示和操作功能，支持节点展开、折叠、选择、复选、拖拽等常用操作。此外，它还支持自定义模板、异步加载子节点、搜索过滤等功能，能够满足不同应用场景的需求。

在线演示

点击这里查看在线演示

项目技术分析

Vue-Tree-Halower 基于Vue.js开发，使用了jsx语法进行模板编写，提供了丰富的API和事件支持，使得开发者可以轻松实现复杂的树形结构操作。

主要技术栈

• Vue.js：前端框架，提供组件化开发能力。
• JSX：用于定义组件模板，使代码更简洁易读。
• Babel：用于编译jsx语法。

API 文档

Node 属性

参数	说明	类型	可选值	默认值
id	当这个属性为空，title属性将作为key	String	Y	—
title	节点名称	String	N	—
expanded	节点是否展开	Boolean	Y	false
checked	节点复选框是否选中	Boolean	Y	false
halfcheck	节点是否为半选（下级被选中）	Boolean	Y	false
visible	节点是否可见	Boolean	Y	true
selected	节点是否被选中	Boolean	Y	false
children	子节点	Array[Object]	Y	—
async	是否异步加载子节点	Boolean	Y	false
loading	开启加载效果	Boolean	Y	false
nocheck	多复选框开启时指定某一节点不渲染复选框	Boolean	Y	false
chkDisabled	禁用某一结点的复选框的功能	Boolean	Y	false
hasExpanded	某一结点是否已经展开过	Boolean	Y	false
parent	获取父节点	Function	-	undefined
selDisabled	禁用某一结点的select的功能	Boolean	Y	false

Tree 属性

参数	说明	类型	可选值	默认值
data	树数据源	Array[Object]	N	—
multiple	开启复选模式	Boolean	Y	false
tpl	自定义模板	JSX	Y	false
halfcheck	开启半选模式	Boolean	Y	全选
scoped	隔离节点选中状态	Boolean	Y	false
draggable	是否支持拖拽	Boolean	Y	false
dragAfterExpanded	拖拽后展开	Boolean	Y	true
canDeleteRoot	是否可以删除根节点	Boolean	Y	false
maxLevel	最大层级数	Number	Y	1024
topMustExpand	首层是否必须可展开	Boolean	Y	true
allowGetParentNode	是否允许节点获取父节点	Boolean	Y	false
radio	selected 只允许单选	Boolean	Y	false
selectAlone	select事件不影响checkbox	Boolean	Y	false

方法

方法名	说明	参数
getSelectedNodes	返回目前被选中的节点所组成的数组	isOriginal: Boolean,ignoreInvisibleNode: Boolean
getCheckedNodes	返回目前复选框选中的节点组成的数组	is