@include 'common'

## 何时使用

Tree 组件适用于大量、具有层级关系的数据展示场景中，并且利用组件的展开收起和关联选中等交互可以方便地对数据进行操作处理。

## 代码演示

# 基本

最简单的用法，展示可展开，可选中，可勾选，可编辑，可右键，禁用，禁用勾选，默认展开，默认选中，默认勾选等功能。
@include 'demo1'

# 数据直接生成

使用 dataSource 生成树结构，除设置 key, label, children 属性外，还可传入 TreeNode 的其他属性，详细见 TreeNode API，推荐使用该方式生成 Tree 组件。
@include 'demo2'

# 单选与多选

通过设置 multiple 为 true，支持节点多选。
@include 'demo3'

# 勾选

通过设置 checkable 为 true，开启节点勾选，默认情况下，节点的勾选状态受上下级节点的关联，可以通过 checkStrictly 为 false 关闭该关联逻辑。
@include 'demo4'

# 带线样式

使用 showLine 开启节点之间的连接线，用于更清晰地展示节点的层级结构。
@include 'demo5'

# 图标

可以设置节点文本前的 icon 图标。
@include 'demo6'

# 异步加载

点击展开节点之后动态加载数据，常用于通过后端接口获取数据的场景。通过设置 loadData 属性开启，通过设置 isLeaf 属性，判断节点是否是叶子节点，允许异步加载数据。
@include 'demo7'

# 虚拟滚动

当树的节点数比较多的时候，设置虚拟滚动提高性能，注意设置高度，且允许滚动。
@include 'demo8'

# 实现搜索

组合 Search 组件，实现 Tree 组件的搜索。
@include 'demo9'

# 实现拖动

实现节点的拖动逻辑。
@include 'demo10'

# 树节点占满一行

可以通过设置 isNodeBlock 为 true，来让树节点占满一行，isNodeBlock 也可传入一个对象，支持设置 defaultPaddingLeft（默认的左内边距）和 indent （缩进距离），另外注意 showLine  在开启 isNodeBlock 时失效。
@include 'demo11'