layui tree 懒加载必须同时配置 isExpand 和 loadFilter:isExpand 控制是否已展开以触发请求,loadFilter 将接口响应映射为标准树结构(含 id、title、children),且初始数据中待加载节点不可含 children 字段。
layui tree 的 lazy 加载必须配合 isExpand 和 loadFilter
直接设 lazy: true 不会触发加载,因为 layui tree 默认只在初始化时读取 children 字段,懒加载需要手动接管子节点获取逻辑。
关键点是:layui 用 isExpand 判断是否已展开(从而决定是否发请求),而真实数据得靠 loadFilter 注入。不配 loadFilter,即使接口返回了子节点,tree 也认不出来。
-
isExpand设为false或函数(返回布尔值),表示“该节点默认不展开,点击才加载” -
loadFilter必须返回标准树结构(含id、title、children等字段),不能直接 return 原始响应体 - 节点数据里不能预先带
children: [],否则 layui 认为“已加载空子集”,不再触发懒加载
点击节点时发请求要靠 click 事件 + tree.setChecked 手动控制
layui tree 没有内置“点击未加载节点自动 fetch”的机制。所谓“懒加载”,实际是监听 click,检测目标节点 children === undefined 或 isExpand === false,再手动调用 tree.reload 或更新数据源。
- 在
click回调里用data.id拿到节点 ID,发起 AJAX 请求子节点 - 拿到响应后,用
tree.setChecked(data.id, true)强制展开(否则 UI 不变) - 接着调用
tree.reload并传入新数据,或直接修改原始数据源再tree.render() - 注意:不要在
click里反复render整棵树,只更新局部更稳
后端接口返回格式必须匹配 layui 的 children 解析规则
layui tree 渲染时只认 children 字段,且要求每个子项至少含 id 和 title。如果后端返回的是 list、items 或驼峰字段,不处理就会渲染失败或空白。
-
loadFilter函数里必须做字段映射,例如把name → title、nodeId → id、subs → children - 如果子节点还有懒加载需求,每个子项也要带
isExpand: false和不带children字段 - 返回空数组
[]和返回undefined效果不同:前者会让节点显示“空展开箭头”,后者才真正保持“可点击加载”状态
常见错误:tree.render 后节点无法点击加载
最常踩的坑是:初始化时用了 data 配置传入整棵树,但其中某节点写了 children: [] —— 这会让 layui 认为“已加载且为空”,后续点击完全没反应。
- 正确做法:初始数据中,所有待懒加载节点都不要出现
children字段,或显式设为undefined - 别在模板里写
children: []或children: null,layui 会当作“已加载完成” - 调试时打印
data对象,确认目标节点确实没有children属性(用hasOwnProperty('children')检查) - Chrome 控制台里点开节点 DOM,看是否有
layui-tree-spread类 —— 没有说明懒加载根本没被识别
懒加载不是开关一开就自动工作,它依赖三者协同:节点元信息(isExpand)、数据注入时机(loadFilter)、以及用户交互后的主动 reload。少一个环节,点击就静音。

















