---
url: /components/tree.md
---
# Tree 树形控件

层级数据展示与交互：展开/收起、勾选（父子联动可选）、选中高亮、搜索过滤与懒加载，常用于组织架构、目录、权限树。

## 基础用法

## 勾选模式

## 选中高亮（受控）

`highlight-current` 开启点击高亮，`current-change` 拿到当前节点；实例方法 `setCurrentKey` / `getCurrentKey` 支持程序化选中，传 `null` 取消选中：

## 勾选联动与半选

父子默认级联：全选父级勾选全部后代，部分勾选呈半选态；`check-strictly` 切换为父子互不联动。`check` 事件携带完整勾选信息，也可随时用 `getCheckedKeys(true)` 只取叶子、`getHalfCheckedKeys()` 取半选：

## 懒加载

`lazy` + `load` 按需拉取子级：首次展开未加载节点时调用 `load(node, resolve)`，`resolve([])` 即视为叶子；未提供初始 `data` 时挂载后自动加载根级：

## 搜索过滤

先传 `filter-node-method` 声明匹配规则，再调用实例方法 `filter(value)` 触发过滤——命中的节点连同其祖先链保留展示，清空关键词即恢复：

## 键盘操作

树容器可聚焦（`tabindex="0"`，子节点不进入 Tab 序）：`↑` / `↓` 按可见顺序移动当前节点（`highlight-current` 开启时联动高亮与 `current-change`），`→` 展开当前节点、`←` 收起，`Enter` 选中（同点击语义），`Space` 在开启复选框时切换勾选（父子级联）。节点带 `role="treeitem"` 与 `aria-expanded` / `aria-selected` / `aria-checked` 标记。

## Tree API