R后悔药 Rue.js
  • 首页
    • 深度指南
    • 实战例子
    • 快速上手
    • 路由指南
    • 术语表
    • 错误代码参考
  • API
    • 合作伙伴
    • 插件
    • 组件库
    • 工具链
    • Text.js
    • 新闻简报
    • 常见问题
    • 团队
    • 版本发布
    • 社区指南
    • 行为规范
    • 隐私政策
  • 赞助
  • 合作伙伴
设置
目录统计
总条目
  • 按钮 Button
  • 排版 Typography
  • 时间选择器 TimePicker
  • 下拉菜单 Dropdown
  • 悬浮操作按钮 FAB
  • 模态框 Modal
  • 切换 Swap
  • 主题控制器 Theme Controller
  • 手风琴 Accordion
  • 头像 Avatar
  • 徽标 Badge
  • 卡片 Card
  • 轮播 Carousel
  • 聊天气泡 Chat
  • 折叠面板 Collapse
  • 倒计时 Countdown
  • 描述列表 Descriptions
  • 对比 Diff
  • 二维码 QRCode
  • 悬浮 3D 卡片 Hover 3D
  • 悬浮画廊 Hover Gallery
  • 键盘提示 Kbd
  • 列表 List
  • 统计 Stat
  • 状态 Status
  • 表格 Table
  • 文本轮播 Text Rotate
  • 时间线 Timeline
  • 锚点 Anchor
  • 固钉 Affix
  • 面包屑 Breadcrumbs
  • 底部导航 Dock
  • 链接 Link
  • 菜单 Menu
  • 导航栏 Navbar
  • 分页 Pagination
  • 步骤 Steps
  • 选项卡 Tabs
  • 提示 Alert
  • 结果页 Result
  • 空状态 Empty
  • 加载 Loading
  • 全局提示 Message
  • 进度条 Progress
  • 环形进度 Radial Progress
  • 骨架屏 Skeleton
  • 通知提醒框 Notification
  • 轻提示 Toast
  • 气泡确认框 Popconfirm
  • 气泡卡片 Popover
  • 工具提示 Tooltip
  • 日历 Calendar
  • 颜色选择器 ColorPicker
  • 复选框 Checkbox
  • 字段集 Fieldset
  • 表单 Form
  • 文件输入 File Input
  • 筛选器 Filter
  • 标签 Label
  • 单选框 Radio
  • 范围选择 Range
  • 评分 Rating
  • 分段选择 Segmented
  • 自动完成 AutoComplete
  • 选择器 Select
  • 树选择 TreeSelect
  • 树控件 Tree
  • 提及输入 Mentions
  • 穿梭框 Transfer
  • 漫游引导 Tour
  • 输入框 Input
  • 数字输入 InputNumber
  • 文本域 Textarea
  • 开关 Toggle
  • 校验器 Validator
  • 分隔线 Divider
  • 弹性布局 Flex
  • 分割面板 Splitter
  • 抽屉侧边栏 Drawer
  • 页脚 Footer
  • 栅格 Grid
  • 瀑布流 Masonry
  • 布局 Layout
  • 主视觉区 Hero
  • 指示器 Indicator
  • 组合项 Join
  • 蒙版 Mask
  • 水印 Watermark
  • 间距 Space
  • 堆叠 Stack
  • 浏览器样机 Mockup Browser
  • 代码样机 Mockup Code
  • 手机样机 Mockup Phone
  • 窗口样机 Mockup Window
目录统计
总条目
  • 按钮 Button
  • 排版 Typography
  • 时间选择器 TimePicker
  • 下拉菜单 Dropdown
  • 悬浮操作按钮 FAB
  • 模态框 Modal
  • 切换 Swap
  • 主题控制器 Theme Controller
  • 手风琴 Accordion
  • 头像 Avatar
  • 徽标 Badge
  • 卡片 Card
  • 轮播 Carousel
  • 聊天气泡 Chat
  • 折叠面板 Collapse
  • 倒计时 Countdown
  • 描述列表 Descriptions
  • 对比 Diff
  • 二维码 QRCode
  • 悬浮 3D 卡片 Hover 3D
  • 悬浮画廊 Hover Gallery
  • 键盘提示 Kbd
  • 列表 List
  • 统计 Stat
  • 状态 Status
  • 表格 Table
  • 文本轮播 Text Rotate
  • 时间线 Timeline
  • 锚点 Anchor
  • 固钉 Affix
  • 面包屑 Breadcrumbs
  • 底部导航 Dock
  • 链接 Link
  • 菜单 Menu
  • 导航栏 Navbar
  • 分页 Pagination
  • 步骤 Steps
  • 选项卡 Tabs
  • 提示 Alert
  • 结果页 Result
  • 空状态 Empty
  • 加载 Loading
  • 全局提示 Message
  • 进度条 Progress
  • 环形进度 Radial Progress
  • 骨架屏 Skeleton
  • 通知提醒框 Notification
  • 轻提示 Toast
  • 气泡确认框 Popconfirm
  • 气泡卡片 Popover
  • 工具提示 Tooltip
  • 日历 Calendar
  • 颜色选择器 ColorPicker
  • 复选框 Checkbox
  • 字段集 Fieldset
  • 表单 Form
  • 文件输入 File Input
  • 筛选器 Filter
  • 标签 Label
  • 单选框 Radio
  • 范围选择 Range
  • 评分 Rating
  • 分段选择 Segmented
  • 自动完成 AutoComplete
  • 选择器 Select
  • 树选择 TreeSelect
  • 树控件 Tree
  • 提及输入 Mentions
  • 穿梭框 Transfer
  • 漫游引导 Tour
  • 输入框 Input
  • 数字输入 InputNumber
  • 文本域 Textarea
  • 开关 Toggle
  • 校验器 Validator
  • 分隔线 Divider
  • 弹性布局 Flex
  • 分割面板 Splitter
  • 抽屉侧边栏 Drawer
  • 页脚 Footer
  • 栅格 Grid
  • 瀑布流 Masonry
  • 布局 Layout
  • 主视觉区 Hero
  • 指示器 Indicator
  • 组合项 Join
  • 蒙版 Mask
  • 水印 Watermark
  • 间距 Space
  • 堆叠 Stack
  • 浏览器样机 Mockup Browser
  • 代码样机 Mockup Code
  • 手机样机 Mockup Phone
  • 窗口样机 Mockup Window

Tree 树控件

Rue 的 Tree 补上了独立树组件这块空白:保持 TreeView 示例里递归数据直改的灵活性,同时把 树控件常用的展开、选中、勾选、简单模式、异步加载和自定义标题一次覆盖。 视觉上使用 Rue 当前的卡片、badge 和 base 色阶体系,不照搬其他组件库的外观。

Node Model
选择、勾选、展开三条状态线

目录树、权限树、发布树都能直接套进来。

DirectoryTree
目录树快捷 API

支持 click / doubleClick 展开,以及更接近文件浏览器的多选交互。

Heavy Interaction
拖拽排序与虚拟滚动

长列表和拖拽改序终于能落在同一个 Tree 上了。

# 基础选中与整行交互

默认 Tree 就是一个纯浏览 + 选中容器;blockNode 和 showIcon 让它更像配置面板里的主导航。

当前选中
docs-api
推荐场景
组件目录、文档导航、资源分类
状态模型
selectedKeys / expandedKeys 分离,便于受控更新。

# DirectoryTree 目录树快捷 API

Tree.DirectoryTree 默认补上目录图标、整行可点和 click 展开;这里先只看 expandAction 和 toggleSelect 这两个基础交互开关。

快捷属性
当前选择
dir-app
当前组合是 expandAction=click、toggleSelect=true、rangeSelect=undefined。
普通点击会落成单选;打开追加后,meta / ctrl 会追加或移除选中,shift 也会启用区间选择。关闭追加时,这两类补充选择都会停用;append / replace 的差异放到下面的对照示例里单独演示。

# shift append vs shift replace

Shift 的基础语义是先选一个节点,再 Shift 选另一个节点,中间连续区间都会选中;append / replace 只决定当前额外选择是否保持。

基础行为:先单击 alpha.ts,再按住 Shift 单击 epsilon.ts,alpha.ts 到 epsilon.ts 都会选中。
append / replace 只影响当前额外非连续选择是否保持:重置后先单击 beta.ts,再按住 Cmd / Ctrl 单击 epsilon.ts,最后按住 Shift 单击 delta.ts。
append 会保持 beta.ts;replace 只保持 delta.ts 到 epsilon.ts 这一段。
rangeSelect="append"
保持原先的非连续选择,再并入新的 shift 区间。
append
当前选择
还没有选择
rangeSelect="replace"
只保持新的 shift 区间,基础的非连续选择会被替换掉。
replace
当前选择
还没有选择

# 父子联动与半选态

这一块只看级联勾选和 halfChecked,不再混入 disabled / disableCheckbox,点击父节点时能直接看到整棵子树联动。

selectedKeys
release-control
checkedKeys
site-home
halfCheckedKeys
release-controlrelease-site

# 禁用节点与禁用复选框

把 disabled 和 disableCheckbox 单独拆出来看:前者整节点只读,后者只禁用勾选框,不再干扰联动示例。

当前勾选
editable-assets
disabled
整节点不可展开、不可选中、不可勾选,适合只读目录或冻结配置。
disableCheckbox
节点仍能展示和展开,但复选框不会参与交互,适合“只可浏览不可授权”的条目。

# Simple Mode + Search

扁平数据直入后,内置搜索会保持命中节点的祖先链,不会把层级上下文切断。

当前选中:["workflow"]
这类 simple mode 很适合后端直接给 id / pId 的菜单、流程节点和权限项,不需要再先做一遍树转换。

# Async Load 与自定义标题

第一次展开时再拉子节点,同时用 titleRender 和 icon 把状态信息塞回每一行。

expandedKeys
[]
selectedKeys
[]
展开 release-bus 后才会注入桌面端和移动端节点,适合远端目录、超大权限树和发布范围配置。

更重交互

当 Tree 既要承载拖拽整理,又要承载超长数据时,draggable 和 virtual 就是两个最关键的控制面。

# allowDrop 策略与拖拽占位

allowDrop 可以把 folder / file 的落点规则写清楚;hover 时 Tree 会直接给出插前、插后或放入占位提示。

最近一次拖拽
folder 支持放入;file 只允许插前和插后,悬停时会显示明确占位态。
allowDrop 规则
folder:允许放入,也允许插前 / 插后。
file:只允许插前 / 插后,不允许作为 inside 目标。
拖到 folder 正中央会看到“放入”,拖到行的上沿或下沿则会出现“插前 / 插后”;如果目标是 file,inside 落点会被 allowDrop 直接拦掉。

# Virtual Scroll

长列表下只渲染可见窗口,height 和 itemHeight 负责限定视口和估算切片范围。

数据量
120
当前选中
["virtual-3"]
对文档页目录、埋点树、批量资源目录这种长列表场景,虚拟滚动能显著降低初始渲染压力。

# Virtual + Async Load 场景页

把 virtual、height、itemHeight 和 loadData 合在一起,就能接超长目录或资源树,只在展开分支时再注入子节点。

根节点数量
64
已加载分支
当前展开
[]
先滚动到较深位置再展开节点也没问题:视口外的行不会真正渲染,只有命中的 branch 才会触发 loadData 注入子节点。

# 展示基础递归 示例

基础的 TreeView 行为没有删掉,只是并进 design 页面里,方便对比“直接改数据”这类递归写法。

单击切换展开,双击叶子节点会把它转换成 folder,并在当前层直接追加一个新子节点。

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 会关闭级联。booleanfalse
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 / toggleSelectTree 多选和目录树都支持 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) => voidfalse / - / -
height / itemHeight / virtual为长列表开启虚拟滚动;height 定义视口高度,itemHeight 用于估算渲染窗口,也能和 loadData 组合接超长懒加载树。number / number / boolean- / 自动按尺寸估算 / true
showLine / showIcon / blockNode控制树线、节点图标和整行可点的布局表现。booleanfalse
titleRender / switcherIcon / icon按节点态自定义标题、展开图标和节点图标。render function | any-
页内导航
页内导航
文档
  • 深度指南
  • 实战例子
  • 快速上手
  • 术语表
  • 错误码参照表
关于
  • 常见问题
  • 团队
  • 版本发布
  • 社区指南
生态
  • 插件
  • 组件库
  • 路由指南
  • Text.js
© 2024-2026 Xiangmin Liu
Rue.JS