treeTable 的 cascade 配置决定父子节点联动行为,默认不开启,需显式设置 tree.data.cascade;值为 'all' 时双向联动,'parent' 仅父影响子,'children' 仅子影响父,'none' 关闭自动逻辑;配置必须写成 tree: { data: { cascade: 'all' } },字段名不可拼错或自定义。
treeTable 的 cascade 配置决定联动行为
默认不开启任何联动,必须显式设置 tree.data.cascade 才能触发父子状态同步。值为 'all' 时双向联动(父选→子全选,子部分取消→父半选),'parent' 仅父影响子,'children' 仅子影响父,'none' 完全关闭自动逻辑。
常见错误是漏配或拼错字段名:必须写成 tree: { data: { cascade: 'all' } },不是 cascade: 'all' 直接挂在顶层,也不是 treeCascade 这类自定义键名。
- 懒加载节点下,
'all'模式仍有效,但只对已加载的子节点生效;未展开的子节点不会被自动选中 - 若数据结构里没有
children字段或字段为空数组,即使配置了'all',父节点点击也不会触发子节点变化 - 表头复选框(全选)的行为也受此配置控制,
'all'下它会递归选中所有层级,'parent'则只选中第一层
手动实现全选子孙节点要调用 getChildren + setRowChecked
checkAll 方法只作用于当前已渲染的直接子节点,无法穿透到深层后代。真正想点一个父节点就选中所有子孙(含懒加载未展开的),得靠 getChildren(id) 拿到完整后代列表,再逐个 setRowChecked。
关键点在于:getChildren 返回的是 Promise(懒加载节点)或普通数组(已加载节点),不能直接 forEach。必须统一用 async/await 处理:
table.on('checkbox(treeTable)', async function(obj) {
if (!obj.checked) return;
const id = obj.data.id;
const children = await table.getChildren(id) || [];
children.forEach(child => {
table.setRowChecked({ id: child.id, checked: true });
});
table.updateStatus();
});
- 没加
await就 forEach,对懒加载节点会报错或漏选 -
updateStatus()必须显式调用,否则父节点半选/全选图标不更新 - 如果节点从未展开过且后端没返回
hasChild: true,getChildren返回空数组,联动就断了
父子反向联动(子选→父半选/全选)依赖数据结构干净
TreeTable 的半选状态(layui-tree-checkboxIndeterminate 类)不是靠 JS 算出来的,而是根据每个节点的 children 数组里已选数量自动推导。一旦数据里 children 缺失、字段名不对(比如叫 subs 而非 children)、或 checked 是字符串 'true' 而非布尔值 true,半选逻辑就失效。
- 初始数据中叶子节点不能带
children: null或children: undefined,否则会被当成有子节点但为空,干扰半选判断 - 使用
setRowChecked修改状态后,必须等 DOM 更新完成再调用updateStatus(),否则祖先节点状态不同步 - 如果用了自定义
id字段(比如叫menu_id),需在tree.idName中声明,否则getChildren和setRowChecked找不到对应节点
监听 checkbox 事件时别直接操作 DOM 类名
老写法里用 $('.layui-form-checked').addClass() 或手动 toggle layui-form-checked 类,会导致 TreeTable 内部状态和 UI 不一致——勾选了但 checkStatus() 拿不到,或者 UI 显示已选但实际未提交。
所有状态变更必须走组件 API:setRowChecked 改单行、checkAll 改当前页、setChecked 批量设 ID 列表。DOM 类只是渲染结果,不是状态源。
- 监听事件要用
table.on('checkbox(tableFilter)', ...),不是form.on('checkbox(...)') - 不要在回调里用
$(obj.elem).prop('checked', true),这只会改 checkbox 元素,不触发 TreeTable 数据层更新 - 如果需要兼容旧版或混合渲染,优先重构数据结构,而不是补 DOM 操作补丁
id、children、hasChild、isLazy 全对齐,且类型全是预期值。差一个 null 或拼错一个字段,联动就静默失效。











