最直接方式是在叶子节点数据中设checked: true,但父节点会连带勾选子节点;推荐tree.setchecked()配合checkchild: false精确控制选中状态,并注意lay_checked字段兼容性。

data 里写 checked: true 最直接,但只对叶子节点稳
直接在树形数据的节点对象中加 checked: true,Layui 渲染时会自动勾上复选框。这个方式简单、不依赖额外 API,但要注意:它只在「无 children 的节点」上表现稳定;一旦给父节点设了 checked: true,所有子节点也会被连带勾选——这是 Layui 默认行为,不是 bug。
必须确保每个节点都有 id 字段,否则后续调用 tree.setChecked() 或联动逻辑会出错;checked 只接受布尔值,写成 "true" 或 1 都无效;后端返回字段名如果是 is_checked 或 selected,得前端映射成 checked 才能识别。
tree.setChecked() 动态设选中,绕过父子连带问题
当需要精确控制(比如只勾 ID 为 101、102 的节点,不管它们是父是子),推荐在 tree.render() 完成后再调用 tree.setChecked()。它不会触发 oncheck 回调,如需通知业务逻辑,得手动补发。
-
id参数必须和tree.render()中传入的id配置严格一致,否则报"Cannot read properties of undefined (reading 'getChecked')" - 传数组如
[101, 102]即可批量设置;传空数组[]可清空所有勾选 - 该方法不展开节点,也不影响
spread状态,纯选中控制
后端返回 checked 但没生效?检查 LAY_CHECKED
某些旧版 Layui 或封装过的 treetable 组件,会忽略原始 checked 字段,转而依赖内部标记 LAY_CHECKED。此时即使数据里写了 checked: true,复选框也不会默认勾上。
解决办法是在 tree.render() 前,对数据做一次预处理:
const processedData = treeData.map(node => ({
...node,
LAY_CHECKED: node.checked ? 'true' : 'false'
}));
LAY_CHECKED 必须是字符串 'true' 或 'false',不能是布尔值;这个字段在标准 tree 模块中通常不需要,仅在部分定制场景下才起作用。
禁用父节点自动勾选子节点?靠 checkChild: false
默认情况下,Layui 会同步父子选中状态。如果编辑回显时只想还原后端存的精确节点(比如只存了子节点 ID,但渲染出来父节点却全被连带勾上),就得关掉这个联动。
在 tree.render() 配置中加 checkChild: false 即可:
tree.render({
elem: '#treeDemo',
data: treeData,
showCheckbox: true,
checkChild: false // 关键:禁用父子自动同步
});
注意:checkChild: false 是 v2.5.6+ 支持的配置项,低版本需手动 patch 源码;开启后,勾选父节点不再影响子节点,取消子节点也不会反向更新父节点状态(包括半选态);如果你仍需半选视觉反馈,得自己监听 oncheck 并手动维护父节点的 indeterminate 状态。
checked 字段语义模糊——它既表示“初始状态”,又参与运行时联动;而 checkChild 和 LAY_CHECKED 这两个开关又分布在不同层级,稍不留意就互相覆盖。实际项目里,建议统一用 tree.setChecked() + checkChild: false 组合,把默认选中逻辑收口到渲染后一步操作,避免数据层和视图层状态错位。











