Tree 树形控件

树形控件用于展示具有层级关系的数据，如文件目录、组织架构、分类导航等。

---

基础用法

通过 :data 传入树形数据，v-model:expanded-keys 控制展开状态。

<TTree :data="data" v-model:expanded-keys="expandedKeys" />

---

默认展开全部

设置 default-expand-all 所有父节点默认展开。

<TTree :data="data" default-expand-all />

---

带复选框

设置 show-checkbox 显示复选框，v-model:checked-keys 绑定选中值，选中父节点自动联动子节点。

<TTree :data="data" show-checkbox v-model:checked-keys="checkedKeys" />

---

手风琴模式

设置 accordion，一次仅展开一个父节点。

<TTree :data="data" accordion />

---

视觉变体

设置 variant="flush" 去除外层边框和圆角，仅保留项间分隔线，适合嵌入卡片或侧边栏。

<TTree :data="data" variant="flush" />

---

复选框关联模式

check-mode 属性控制复选框的三种关联模式：

• cascade（默认）：父子全联动。选中父节点时，所有子节点自动选中；选中任意子节点时，父节点自动标记为半选状态。
• parent-link：子选中父自动选中，但父选中不影响子节点。
• independent：节点间互不关联，各自独立选中。

<TTree :data="data" show-checkbox check-mode="cascade" />
<TTree :data="data" show-checkbox check-mode="parent-link" />
<TTree :data="data" show-checkbox check-mode="independent" />

---

API

Props

属性	类型	默认值	说明
data	TreeNode[]	[]	树形数据
node-key	string	'id'	节点唯一标识字段名
children	string	'children'	子节点字段名
label-key	string	'label'	显示文本字段名
default-expand-all	boolean	false	默认展开全部父节点
expanded-keys	(string | number)[]	[]	展开节点的 key 列表
checked-keys	(string | number)[]	[]	选中节点的 key 列表
show-checkbox	boolean	false	是否显示复选框
check-mode	'independent' | 'parent-link' | 'cascade'	'cascade'	复选框关联模式
variant	'default' | 'flush'	'default'	视觉变体
accordion	boolean	false	手风琴模式
indent	number	24	每层缩进像素

TreeNode

字段	类型	说明
id	string | number	节点唯一标识
label	string	显示文本
children	TreeNode[]	子节点数组
disabled	boolean	是否禁用
icon	Component	节点图标

Emits

事件	参数	说明
update:expanded-keys	keys	展开节点变化
update:checked-keys	keys	选中节点变化
node-click	node, event	点击节点
node-expand	node	展开节点
node-collapse	node	收起节点