tui-org-tree依赖tui-org-node,必须通过easycom模式正确配置路径或手动引入注册,否则递归渲染失败导致白屏或“Component is not found”错误;数据需含children字段且符合递归结构。

tui-org-tree 依赖 tui-org-node,而 ThorUI 的引入方式直接决定这两个组件能否正常递归渲染——不配对引入,树形结构会白屏或报错“Component is not found”。
easycom 模式是 uni-app 引入 ThorUI 的推荐方式
它能自动匹配 tui-xxx 标签并加载对应组件,避免手动 import 和注册,同时支持 tree-shaking(未用组件不打包)。但必须配置正确,否则 tui-org-tree 内部调用的 tui-org-node 无法被识别。
- 在
pages.json的globalStyle同级添加easycom节点(不是uni_modules) - 配置需严格匹配路径:ThorUI 组件默认放在
@/components/thorui/下,文件名是tui-button/tui-button.vue这类结构 - 正则必须写成
"tui-(.*)": "@/components/thorui/tui-$1/tui-$1.vue",少一个$1或路径斜杠错位都会导致找不到组件 - 配置后无需重启 HBuilderX,但首次使用新组件时建议冷启动一次,避免缓存干扰
手动引入时必须显式注册 tui-org-node
tui-org-tree 是容器组件,内部通过 v-for + :is 或递归 <tui-org-node></tui-org-node> 渲染子节点。uni-app 端若关闭 easycom,tui-org-node 不会被自动识别——哪怕你只用了 tui-org-tree。
- 在
tui-org-tree.vue的components选项里,必须手动引入并注册tui-org-node - 如果项目是 Vue 3 +
setup语法,不能只靠defineAsyncComponent,得确保tui-org-node已作为普通组件注册进当前作用域 - 常见错误现象:
Component is not found in path "components/thorui/tui-org-node/tui-org-node.vue"—— 实际路径没错,只是没注册 - Vue 2 页面示例中,
import tuiOrgNode from "@/components/thorui/tui-org-node/tui-org-node.vue"必须出现在tui-org-tree.vue内部,而非父页面
npm 安装后路径映射容易出错
执行 npm install thorui-uni 后,组件实际安装在 node_modules/thorui-uni/components/,但 easycom 配置仍需指向项目内路径——npm 包不会自动软链到 @/components/thorui/。
- 要么把
node_modules/thorui-uni/components/整个拷贝到@/components/thorui/(推荐) - 要么改 easycom 正则为
"tui-(.*)": "thorui-uni/components/tui-$1/tui-$1.vue",但部分平台(如支付宝小程序)不支持 node_modules 内直接引用 .vue 文件 - npm 方式升级方便,但每次
npm update后要确认tui-org-node的导出是否变更(比如从默认导出变成命名导出) - 注意:官方 npm 包名为
thorui-uni,不是thorui或thor-ui,装错就彻底找不到组件
tui-org-tree 白屏时优先检查递归深度和数据结构
即使引入成功,tui-org-tree 也可能不渲染任何内容——问题常不在引入,而在数据格式或递归限制。
- 必须提供
nodes属性,且每个节点要有children字段(哪怕为空数组),不能是subNodes或list - uni-app 的递归组件有默认深度限制(一般 8 层),超深组织架构需在
tui-org-node.vue中手动加maxDepthprop 控制 - 微信小程序真机调试时,若节点过多,可能触发
Maximum call stack size exceeded,需开启懒加载或分页折叠 - 检查控制台是否有
Failed to resolve component: tui-org-node,有则说明引入失败;若无报错但空白,大概率是nodes数据为空或字段名不匹配
真正卡住人的从来不是“怎么装”,而是 tui-org-node 在哪注册、nodes 字段叫什么、easycom 正则里那个 $1 到底替换了哪部分——这些细节错一个,树就长不出来。


















