Tree 树
用于展示层级数据，支持选中、展开、多选、懒加载与节点拖拽。
基础用法
层级树
点击展开按钮显示 / 收起子节点，点击节点文本选中该节点。
受控展开与选中
初始展开与选中
expanded 控制展开节点，selected 控制选中节点。
多选
可多选（checkable）
禁用节点
禁用节点
懒加载
懒加载（展开时异步回填子节点）
点击「目录 A」前的展开箭头触发加载
设置 lazy 后，无 children 且未标记 isLeaf / loaded 的节点视为「未加载」：点击展开箭头派发 oas-load（detail: { key }）并调用 load 属性回调，由宿主回填子节点后重设 data 属性；加载期间展开箭头位置显示 loading 占位，回填完成后自动展开并收起占位。标记 isLeaf: true 的节点不显示展开箭头。
节点拖拽
可拖拽（拖动换序 / 换父）
拖拽节点到目标行上 / 下 / 中部，分别插入其前 / 后 / 子
设置 draggable 后可拖拽节点换序或换父：拖到目标行上半区插入其前（before）、下半区插入其后（after）、中部且目标可展开时移入其下（inner），拖拽过程有插入线与高亮反馈；松手派发 oas-node-drop（detail: { dragKey, dropKey, position }），由宿主更新数据后重设 data 属性。拖到树空白处视为移入根（dropKey 为空字符串、position: 'inner'）。
大数据量（虚拟滚动）
万级节点虚拟滚动
设置 height 开启虚拟化（搭配 row-height 定高）：树复用 oas-virtual-list 只渲染可见窗口内的节点，展开状态保存在 expanded 属性中，滚动与重渲染均不丢失。
自定义节点渲染
自定义节点（图标 + 富文本）
节点内容可用 template[slot="node"] 提供静态骨架（[data-node-label] 节点自动绑定节点 label），template[slot="toggle"] 可替换默认展开箭头；每个节点行渲染后派发 oas-node-render（detail: { node, element }），宿主可监听改写 element 为任意图标 / 富文本。示例中任务数徽标即由该事件写入；键盘与 ARIA（treeitem / aria-expanded / aria-level）在自定义渲染下保持不变。
目录模式（文件浏览器）
目录模式（文件浏览器样式）
设置 directory 后按文件浏览器风格渲染：有 children（或懒加载下未加载）的节点显示文件夹图标，isLeaf / 无 children 的节点显示文件图标；文件夹按展开 / 收起切换图标，层级缩进与 hover 高亮行沿用行样式。
事件
选中与勾选事件
选中：— · 勾选：—
API
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
checkable | 是否显示复选框 | boolean | — |
checked | 勾选节点 key 集合（逗号分隔） | string | — |
data | 节点数据 [{ key, label, children?, disabled?, isLeaf?, loaded? }]，JSON 字符串 | TreeNode[] | string | [] |
directory | 目录模式：有 children（或懒加载下未加载）的节点显示文件夹图标，isLeaf / 无 children 的节点显示文件图标，文件夹按展开 / 收起切换图标 | boolean | — |
draggable | 节点可拖拽换序 / 换父，落点显示插入线 / 高亮，松手派发 oas-node-drop | boolean | — |
expanded | 展开节点 key 集合（逗号分隔） | string | — |
height | 虚拟滚动视口高度（px）；设置后开启大数据量虚拟化渲染 | string | 360 |
lazy | 懒加载：无 children 且未标记 isLeaf / loaded 的节点，展开时触发加载 | boolean | — |
load | 懒加载回调 (payload: { key }) => void，与 oas-load 事件并存；宿主回填子节点后重设 data 属性 | (payload: { key: string }) => void | — |
row-height | 虚拟化时每行固定高度（px） | string | 32 |
selected | 选中节点 key | string | — |
事件
| 事件 | 说明 |
|---|---|
oas-check | 勾选变化，detail: { key, checked } |
oas-load | 懒加载触发，detail: { key }；宿主回填 children 后重设 data 属性 |
oas-node-drop | 节点拖放，detail: { dragKey, dropKey, position }，position 为 before / after / inner；dropKey 为空字符串表示移入根 |
oas-node-render | 每个渲染的节点行派发，detail: { node, element }（element 为节点 label 容器，宿主可改写为图标 / 富文本） |
oas-select | 选中节点，detail: { key, selected } |
插槽
| 名称 | 说明 |
|---|---|
template[slot="node"] | 节点行静态模板，克隆到每个节点 label 容器；[data-node-label] 节点自动绑定节点 label |
template[slot="toggle"] | 展开按钮静态模板，克隆到每个可展开节点的展开按钮内（替换默认 › 图标） |
节点字段说明：
isLeaf: true表示显式叶子（懒加载下不显示展开箭头）；loaded: true表示已加载完成（配合children使用，避免重复触发加载）。