子行必须紧跟主行且同属一个，不可嵌套；正确结构为后紧接，通过data-parent-id精准关联父子关系，禁用nextSibling改用nextElementSibling。
子行必须作为独立 紧跟主行，不能嵌套
浏览器会强制修正非法 HTML 结构：<tr> 只能是 <code><tbody> 的直接子元素。写成 <code><tr></tr>
<tr>...</tr> 会导致内层 <tr> 被自动提升到同级，父子关系彻底丢失。JS 查找 <code>nextSibling 会失败，折叠后常出现空行、边框塌陷、colspan 错位。
正确结构是：主行 <tr class="expandable"> → 紧跟一个 <code><tr class="detail-row hidden">，二者同属一个 <code><tbody>。DOM 顺序决定视觉连贯性，不能靠 JS 插入到任意位置。
<ul>
<li>
<code>colspan 值必须等于表格实际列数（如 5 列就写 colspan="5"），动态列需用 JS 计算：table.rows[0].cells.length
不要用 visibility: hidden —— 它仍占布局空间，鼠标点击区域偏移、滚动条异常
初始状态保持所有行可见，显隐逻辑全由 JS 控制；避免提前写 style="display:none"，否则增删行时状态易错乱
用 data-parent-id 而不是 DOM 位置判断父子关系
仅靠 nextElementSibling 只能处理单级“主-详情”行，无法支持多级树形（比如部门→小组→成员）。一旦中间插入筛选行、分页占位符或服务端渲染的空行，链式查找立刻断裂。
必须显式标记层级归属：<tr data-level="1" id="row-101">，子行写 <code><tr data-level="2" data-parent-id="101">。这样 JS 可用 <code>document.querySelectorAll('tr[data-level="2"][data-parent-id="101"]') 精准锁定目标集合，不受 DOM 顺序干扰。
立即学习“前端免费学习笔记（深入）”；
- 给每行设唯一
id（如 row-123），父行用 data-children="123,456" 显式声明子集，更利于动态增删和状态同步
- 避免用
class="child-level-2" 这类命名——CSS 类易被其他逻辑覆盖，data- 属性语义清晰、不易冲突
- 折叠/展开动作应绑定在父行内带
role="button" 的可点击区域（如图标或文字旁空白区），而非整行 <tr>，防止误触且支持键盘 Enter/Space 操作
<h3>箭头旋转和详情切换必须同步操作</h3>
<p>只切 <code>display 不动图标，或只转图标不控显隐，都会造成状态错位。用户点两次后可能发现图标朝下但内容已收起，或图标朝右但详情仍显示。
关键在于把两个动作封装为原子操作：点击时同时调用 targetRow.classList.toggle("hidden") 和 arrowEl.classList.toggle("rotated")。CSS 中用 transform: rotate(90deg) 实现 ▶ → ▼，别用 Unicode 替换（缩放失真、对齐难）。
- 必须用
nextElementSibling 获取目标详情行 —— nextSibling 会拿到文本节点（换行、空格），导致 classList 操作报错
- 过渡动画不能直接作用于
<tr>（<code>height 不生效），应在详情 <td> 内包一层 <code><div class="detail-content">，对它做 <code>max-height + overflow: hidden 动画
- 主行
:hover 时，用相邻兄弟选择器 .expandable:hover + .detail-row 同步高亮详情区，否则鼠标移到详情行上会突然失去背景色
第三方表格库（如 el-table）要绕过默认渲染逻辑
像 Element Plus 的 el-table 会接管 DOM 渲染，直接操作 tr 元素容易被重置。它提供 expand-row-keys 和 row-key 属性，但要求 row-key 必须唯一且稳定（不能用索引），expand-row-keys 必须是字符串数组（如 ["101", "102"]），传数字或对象会静默失效。
如果你手动插入 detail-row，el-table 会在下次 re-render 时清除它。正确做法是用其原生的 expand 插槽，并确保每行数据有明确的 isExpanded 字段供响应式控制。
- 不要在
el-table 外层再套 onclick —— 事件会被内部 row-click 拦截，优先使用 @expand-change 钩子
- 自定义折叠图标需通过
expand-slot 注入，不能硬塞进 <th> 或用 CSS 伪元素，否则 SSR 或服务端渲染时不可见
<li>IE11 兼容性注意：<code>display: table-row 可用，但若表格用了 flex 布局包裹，则需额外加 display: block 回退样式
细节最易被忽略：所有状态切换后，建议手动触发 table.offsetHeight 强制重排，避免某些浏览器（尤其是 Safari 旧版）滚动条未及时更新、高度计算错误。这不是“可选优化”，而是折叠后页面卡住、底部内容被截断的常见原因。
浏览器会强制修正非法 HTML 结构：<tr> 只能是 <code><tbody> 的直接子元素。写成 <code><tr></tr>
<tr>...</tr> 会导致内层 <tr> 被自动提升到同级，父子关系彻底丢失。JS 查找 <code>nextSibling 会失败，折叠后常出现空行、边框塌陷、colspan 错位。
正确结构是：主行 <tr class="expandable"> → 紧跟一个 <code><tr class="detail-row hidden">，二者同属一个 <code><tbody>。DOM 顺序决定视觉连贯性，不能靠 JS 插入到任意位置。
<ul>
<li>
<code>colspan 值必须等于表格实际列数（如 5 列就写 colspan="5"），动态列需用 JS 计算：table.rows[0].cells.length
visibility: hidden —— 它仍占布局空间，鼠标点击区域偏移、滚动条异常style="display:none"，否则增删行时状态易错乱用 data-parent-id 而不是 DOM 位置判断父子关系
仅靠 nextElementSibling 只能处理单级“主-详情”行，无法支持多级树形（比如部门→小组→成员）。一旦中间插入筛选行、分页占位符或服务端渲染的空行，链式查找立刻断裂。
必须显式标记层级归属：<tr data-level="1" id="row-101">，子行写 <code><tr data-level="2" data-parent-id="101">。这样 JS 可用 <code>document.querySelectorAll('tr[data-level="2"][data-parent-id="101"]') 精准锁定目标集合，不受 DOM 顺序干扰。
立即学习“前端免费学习笔记（深入）”；
- 给每行设唯一
id（如row-123），父行用data-children="123,456"显式声明子集，更利于动态增删和状态同步 - 避免用
class="child-level-2"这类命名——CSS 类易被其他逻辑覆盖，data-属性语义清晰、不易冲突 - 折叠/展开动作应绑定在父行内带
role="button"的可点击区域（如图标或文字旁空白区），而非整行<tr>，防止误触且支持键盘 Enter/Space 操作 <h3>箭头旋转和详情切换必须同步操作</h3> <p>只切 <code>display不动图标，或只转图标不控显隐，都会造成状态错位。用户点两次后可能发现图标朝下但内容已收起，或图标朝右但详情仍显示。关键在于把两个动作封装为原子操作：点击时同时调用
targetRow.classList.toggle("hidden")和arrowEl.classList.toggle("rotated")。CSS 中用transform: rotate(90deg)实现 ▶ → ▼，别用 Unicode 替换（缩放失真、对齐难）。- 必须用
nextElementSibling获取目标详情行 ——nextSibling会拿到文本节点（换行、空格），导致classList操作报错 - 过渡动画不能直接作用于
<tr>（<code>height不生效），应在详情<td> 内包一层 <code><div class="detail-content">，对它做 <code>max-height+overflow: hidden动画 - 主行
:hover时，用相邻兄弟选择器.expandable:hover + .detail-row同步高亮详情区，否则鼠标移到详情行上会突然失去背景色 - 不要在
el-table外层再套onclick—— 事件会被内部row-click拦截，优先使用@expand-change钩子 - 自定义折叠图标需通过
expand-slot注入，不能硬塞进<th> 或用 CSS 伪元素，否则 SSR 或服务端渲染时不可见 <li>IE11 兼容性注意：<code>display: table-row可用，但若表格用了flex布局包裹，则需额外加display: block回退样式
细节最易被忽略：所有状态切换后，建议手动触发
第三方表格库（如 el-table）要绕过默认渲染逻辑
像 Element Plus 的
el-table会接管 DOM 渲染，直接操作tr元素容易被重置。它提供expand-row-keys和row-key属性，但要求row-key必须唯一且稳定（不能用索引），expand-row-keys必须是字符串数组（如["101", "102"]），传数字或对象会静默失效。如果你手动插入
detail-row，el-table会在下次 re-render 时清除它。正确做法是用其原生的expand插槽，并确保每行数据有明确的isExpanded字段供响应式控制。table.offsetHeight强制重排，避免某些浏览器（尤其是 Safari 旧版）滚动条未及时更新、高度计算错误。这不是“可选优化”，而是折叠后页面卡住、底部内容被截断的常见原因。 - 必须用
