权限树形勾选区核心在于结构可嵌套、状态可追溯、DOM可稳定控制；必须用内嵌保证父子关系可推导，配合data-id/data-pid构建映射表，复选框支持checked/unchecked/indeterminate三态并动态同步。
权限树形勾选区不是“往页面里塞个树就行”，核心在于：结构必须可嵌套、状态必须可追溯、DOM 必须能被框架或脚本稳定控制。直接用 <ul><li></ul> 手写多级嵌套，后期加复选框联动、异步加载、键盘导航时会迅速失控。
树节点 HTML 结构必须满足父子关系可推导
常见错误是把子节点平铺在父节点同级，靠 CSS 缩进模拟层级——这样 JS 无法自动识别父子关系，nodeClick 或 checkChange 回调里根本拿不到上下文。正确做法是子 <ul></ul> 必须作为父 <li> 的直接子元素嵌套：
<li data-id="1" data-pid="0">
<input type="checkbox" data-node-id="1"> 用户管理
<ul>
<li data-id="2" data-pid="1">
<input type="checkbox" data-node-id="2"> 用户列表
</li>
</ul>
</li>
- 每个
<li>带data-id和data-pid，用于构建树形关系映射表 - 复选框放在
<li>内部，不外包<label></label>（避免点击 label 触发两次 change） - 禁止用
margin-left模拟缩进；用padding-left+position: relative配合图标对齐更可控
复选框状态必须支持三种值：checked / unchecked / indeterminate
前端只用 checked 属性只能表达两种状态，会导致“父节点半选”无法渲染。浏览器原生支持 indeterminate，但必须用 JS 设置，不能写在 HTML 里：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
node.querySelector('input').indeterminate = true;
- 每次子节点变更后，需递归计算父节点状态：
全子选中 → checked，全未选 → unchecked，部分选中 → indeterminate - 设置
indeterminate = true后，checked属性值会被忽略，所以读取是否“逻辑选中”不能只看checked，得查状态映射对象 - IE11 不支持
indeterminate的 CSS 样式继承，需额外加类名如.is-indeterminate控制图标
勾选区容器宽度与滚动行为要提前约束
权限树常出现在左侧窄栏或弹窗内，节点一多就横向溢出或纵向卡死。不要等数据渲染完再算宽高：
立即学习“前端免费学习笔记（深入）”；
- 给外层容器设
max-width: 320px（适配多数后台侧边栏），内部<ul></ul>设overflow-x: hidden - 禁用
white-space: nowrap，让长文本自动换行；用text-overflow: ellipsis配合display: inline-block处理单行截断 - 如果节点带操作按钮（如“编辑权限”），统一收进
title或 tooltip，别强行挤在同一行 - 移动端触摸区域至少 44×44px，复选框本身小，得用
::before伪元素放大点击热区
真正难的不是画出树，而是当用户勾选“菜单管理”节点时，系统得立刻知道它底下有 17 个子项、其中 3 个已被禁用、2 个当前角色无权访问——这些信息必须从 DOM 结构里可反查，而不是靠 JS 变量临时存一份副本。否则刷新页面、切换角色、回退操作时，状态就断了。
