---
title: Tree 树
description: 用于文字提示的气泡框。
isComponent: true
usage: true
spline: data
author: 刘勇
---

## 基础用法

可承载存在父子关系的内容的展示，父节点带有展开/折叠操作，提供单个节点的选中标记。常用于系统目录结构、组织架构的展示。

{{ base }}

## 悬浮状态

指的是当鼠标移动到节点上的效果

{{ hover }}

## 节点展开

默认情况下，只能通过点击每一项前面的小三角才能站下下一层级，通过`expandOnClickNode`可设置点击整个节点都会展开或者收起下一层级。

{{ expandOnClickNode }}

## 动画

这里的动画指的是展开和收起子节点时候的动画，通过`transition`属性控制，默认情况是开启状态。

{{ transition }}

## 手风琴

通过`expandMutex`属性可设置同层级节点互斥展开，也就是手风琴效果

{{ expandMutex }}

## 树的选择

一个基本的树只能展开和收起，并没有选中功能，通过`activable`设置树可选中，并且可通过`activeMultiple`设置树可多选，此时可通过`actived`和`defaultactived`来设置默认选中的节点。

{{ active }}

## 选中模式

上面已经知道怎么控制树可选择，下面可通过`valueMode`来设置选中之后值的格式，支持三种模式，

`all`：表示父节点和子节点全部会出现在选中值里面

`parentFirst`：表示当子节点全部选中时，仅父节点在选中值里面

`onlyLeaft`：表示无论什么情况，选中值仅呈现叶子节点

{{ valueMode }}

## 复选框

通过`checkable`可设置每个节点前面是否显示复选框，如果想禁用某些节点的复选框，可通过`disableCheck`来单独设置。

{{ checkable }}

## 独立

在树组件中，父节点和子节点有着高度关联的关系，当父节点选中的时候会自动选中其所有子节点，并且当选中子节点的时候也会自动更新父节点的选择状态，通过`checkStrictly`便可打破这一关联，让父子节点成为单独可选择的个体。

{{ checkStrictly }}

## 节点扩展

很多情况，我们需要单独操作某个节点，例如删除节点，添加子节点，为了更方便的进行操控，可通过`operations`来向节点右侧放置一些常用的图标或者按钮

{{ operation }}

## 自定义图标

这里的自定义图标指的是每个子节点前面的小三角，可通过`icon`属性定义，一般情况不推荐修改。

{{ icon }}

## 连线

节点之间的关系可通过`line`来设置。

{{ line }}

## 异步加载

在树据比较多的情况，往往不会一次其加载所有层级的数据，可以通过`load`来实现按需点击加载，默认只加载第一层

{{ load }}

## 拖拽

通过`draggable`可设置树节点可拖拽效果

{{ draggable }}
