layui tree 组件无内置 expand/collapse 事件,需用 tree.on('node', ...) 结合 dom 状态判断展开折叠;或用 mutationobserver 监听子容器变化;亦可修改源码添加 spreadopen/spreadclose 回调。
layui tree 组件本身不提供 expand 或 collapse 这类内置事件,直接写 tree.on('expand', ...) 会静默失效——这是最常踩的坑。
为什么 tree.on('expand') 不生效
Layui 2.8.x 及之前版本的 tree 模块没有暴露展开/折叠的独立事件钩子。官方 API 文档中查不到 expand、collapse 或类似名称的事件类型。你看到的示例多是误传,或是混淆了其他 UI 库(如 Element Plus)的写法。
真正可用的监听入口只有两个:tree.on('click', ...) 和 tree.on('node', ...),但它们的行为和触发时机有关键差异:
-
click是原生点击事件,能捕获任意节点点击,但无法区分是展开、折叠还是纯文本点击 -
node事件只在用户点击「带子节点的展开图标」时触发,且仅返回被点击节点数据,不带状态标识
用 tree.on('node', ...) + 状态判断实现准展开监听
虽然 node 事件不直接告诉你“这次是展开还是折叠”,但可以通过 DOM 状态反推:节点是否已展开,取决于其子节点容器是否可见,以及图标类名是否为 layui-icon-subtraction。
实操建议:
- 监听
tree.on('node', function(obj){...}),拿到obj.data和obj.elem - 用
$(obj.elem).next('.layui-tree-body').length判断子容器是否存在(避免空节点误判) - 检查图标元素:
$(obj.elem).find('.layui-icon').hasClass('layui-icon-subtraction')→ 当前是折叠态;hasClass('layui-icon-addition')→ 当前是展开态 - 注意:这个判断必须在事件回调内立即执行,不要依赖
setTimeout,因为图标类名是同步更新的
示例代码片段:
tree.on('node', function(obj){
const $icon = $(obj.elem).find('.layui-icon');
const isExpanded = $icon.hasClass('layui-icon-subtraction');
console.log('节点', obj.data.id, isExpanded ? '即将收起' : '即将展开');
});
监听展开/折叠后的真实 DOM 变化(兼容旧版 & 异步场景)
如果你需要在子节点真正显示/隐藏完毕后再执行逻辑(比如调整表格高度、刷新关联组件),不能依赖 node 事件的即时性——因为子节点渲染是异步的,且可能涉及 AJAX 加载。
更稳妥的做法是监听 DOM 变化或使用 tree.reload() 的回调:
- 对子容器
.layui-tree-body使用MutationObserver监听display或height变化(适合精确控制) - 若用了异步加载,在
tree.reload()的done回调里处理,此时子节点 DOM 已就位 - 避免轮询
offsetHeight或getComputedStyle().height,性能差且易漏判
特别提醒:Layui Tree 没有 on('expandDone') 这类钩子,所有“展开完成”逻辑都得自己兜底。
扩展源码添加 spreadOpen/spreadClose 回调(仅限可改源码场景)
如果你能修改 layui/tree.js,可在源码中找到展开/折叠逻辑块(通常在 toggleNode 方法内),插入自定义回调:
- 展开分支末尾加:
options.spreadOpen && options.spreadOpen({elem: elem, data: item}); - 折叠分支末尾加:
options.spreadClose && options.spreadClose({elem: elem, data: item}); - 然后初始化时传入:
spreadOpen: function(){...}, spreadClose: function(){...}
这种方式最干净,但要求部署环境允许修改 Layui 源文件,且每次升级 Layui 都需重新 patch。
真实项目中,多数人卡在“以为有事件却找不到”,其实问题不在写法,而在默认就不支持——得换思路,而不是硬套别家 API。











