Tree 树控件
Rue 的 Tree 补上了独立树组件这块空白:保持 TreeView 示例里递归数据直改的灵活性,同时把 树控件常用的展开、选中、勾选、简单模式、异步加载和自定义标题一次覆盖。 视觉上使用 Rue 当前的卡片、badge 和 base 色阶体系,不照搬其他组件库的外观。
目录树、权限树、发布树都能直接套进来。
支持 click / doubleClick 展开,以及更接近文件浏览器的多选交互。
长列表和拖拽改序终于能落在同一个 Tree 上了。
# 基础选中与整行交互
默认 Tree 就是一个纯浏览 + 选中容器;blockNode 和 showIcon 让它更像配置面板里的主导航。
# DirectoryTree 目录树快捷 API
Tree.DirectoryTree 默认补上目录图标、整行可点和 click 展开;这里先只看 expandAction 和 toggleSelect 这两个基础交互开关。
# shift append vs shift replace
Shift 的基础语义是先选一个节点,再 Shift 选另一个节点,中间连续区间都会选中;append / replace 只决定当前额外选择是否保持。
# 父子联动与半选态
这一块只看级联勾选和 halfChecked,不再混入 disabled / disableCheckbox,点击父节点时能直接看到整棵子树联动。
# 禁用节点与禁用复选框
把 disabled 和 disableCheckbox 单独拆出来看:前者整节点只读,后者只禁用勾选框,不再干扰联动示例。
# Simple Mode + Search
扁平数据直入后,内置搜索会保持命中节点的祖先链,不会把层级上下文切断。
["workflow"]# Async Load 与自定义标题
第一次展开时再拉子节点,同时用 titleRender 和 icon 把状态信息塞回每一行。
更重交互
当 Tree 既要承载拖拽整理,又要承载超长数据时,draggable 和 virtual 就是两个最关键的控制面。
# allowDrop 策略与拖拽占位
allowDrop 可以把 folder / file 的落点规则写清楚;hover 时 Tree 会直接给出插前、插后或放入占位提示。
# Virtual Scroll
长列表下只渲染可见窗口,height 和 itemHeight 负责限定视口和估算切片范围。
# Virtual + Async Load 场景页
把 virtual、height、itemHeight 和 loadData 合在一起,就能接超长目录或资源树,只在展开分支时再注入子节点。
# 展示基础递归 示例
基础的 TreeView 行为没有删掉,只是并进 design 页面里,方便对比“直接改数据”这类递归写法。
API
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
treeData | 树数据源,支持嵌套 children 和字段映射。 | TreeDataNode[] | [] |
selectedKeys / defaultSelectedKeys | 受控与非受控的当前选中项,multiple 打开后允许多选。 | TreeKey[] | [] |
checkedKeys / defaultCheckedKeys | 勾选模式下的选中集合,strict 模式会回传 checked / halfChecked 结构。 | TreeKey[] | { checked: TreeKey[]; halfChecked: TreeKey[] } | [] |
expandedKeys / defaultExpandedKeys / defaultExpandAll | 控制展开态,适合目录树、权限树和异步加载场景。 | TreeKey[] / boolean | [] / false |
checkable / checkStrictly | 切换勾选与父子联动模式;strict 会关闭级联。 | boolean | false |
treeDataSimpleMode / fieldNames | 直接接入 id / pId 扁平数据,同时可映射 title、key、children 字段。 | boolean | TreeSimpleModeConfig / TreeFieldNames | - / - |
allowSearch / searchValue / filterTreeNode | 提供内置搜索输入和过滤逻辑,命中后会保持祖先链路。 | boolean / string / boolean | ((inputValue, node) => boolean) | false / - / true |
loadData | 展开未加载分支时触发异步加载,适合远端目录与超大树。 | (node: TreeNode) => Promise<any> | void | - |
rangeSelect / Tree.DirectoryTree / expandAction / toggleSelect | Tree 多选和目录树都支持 shift 区间选择;目录树额外提供展开动作和 ctrl/meta 追加选择开关。 | false | "append" | "replace" / DirectoryTreeProps / false | "click" | "doubleClick" / boolean | "append" / blockNode=true / showIcon=true / "click" / true |
draggable / allowDrop / onDrop | 开启拖拽排序并控制是否允许落点;allowDrop 和 onDrop 都会拿到 dropToGap,UI 会同步显示插前、插后或放入占位态。 | TreeDraggable / (info) => boolean / (info) => void | false / - / - |
height / itemHeight / virtual | 为长列表开启虚拟滚动;height 定义视口高度,itemHeight 用于估算渲染窗口,也能和 loadData 组合接超长懒加载树。 | number / number / boolean | - / 自动按尺寸估算 / true |
showLine / showIcon / blockNode | 控制树线、节点图标和整行可点的布局表现。 | boolean | false |
titleRender / switcherIcon / icon | 按节点态自定义标题、展开图标和节点图标。 | render function | any | - |