正确做法是将事件监听精准绑定在表头首行 上，而非整个 ；支持逐行控制时需用 nextelementsibling 定位目标行；多级折叠应通过 data-level 或 data-parent-id 匹配父子关系；el-table 中须确保 row-key 唯一且 expand-row-keys 为字符串数组。
只让表头点击触发整表折叠
直接给 <table> 加 <code>onclick 是错的——点 anywhere 都会触发，用户点到数据行就意外收起，体验崩坏。正确做法是把事件监听精准绑在首行 <tr> 上。
<p>关键点：</p>
<ul><li>HTML 中移除 <code><table onclick="...">，改用 <code><tr onclick="expandCollapseTable()">（仅首行）
<li>JS 里用 <code>table.rows 获取所有行，从索引 1 开始遍历（跳过表头）
style="display:none"，初始状态保持可见，折叠逻辑全由 JS 控制row.style.display = "none" 硬切——推荐切换 CSS 类（如 .hidden），方便复用和维护每行独立展开/收起 + 箭头旋转
如果要支持“逐行控制”，就不能靠表头统一开关，得让每行带自己的触发器（比如右端 ▶ 图标），并联动下一行内容。
常见错误是用 nextSibling 找目标行——但中间若有文本节点（换行、空格），就会失败。必须用 nextElementSibling。
实操建议：
- HTML 结构固定：主行
<tr> → 紧跟一个 <code><tr class="detail-row">（<code>colspan占满） - 箭头放在
<span>▶</span>里，JS 绑定点击时同时操作：el.classList.toggle("rotated")和targetRow.classList.toggle("hidden") - CSS 里用
transform: rotate(90deg)实现 ▶→▼，别用 Unicode 替换（不易对齐、缩放失真） - 注意 IE 兼容性：
display: table-row在 IE9+ 可用，但flex或grid布局下需另作适配 - 用
$("tr[data-level='2']").hide()一次性隐藏二级行，结果三级行也跟着没了——因为三级行本身也是data-level="2"的兄弟，没被排除 - 点击一级行时，只展开直属二级子行，但没递归处理“二级行下还有三级”的情况
- 图标状态不同步：展开一级时箭头变▼，但二级行里的箭头还是▶，用户无法判断是否可再点
-
row-key必须设为唯一字段（如id），否则 expand 无效 -
expand-row-keys是数组，存的是字符串 ID，不是对象引用 - 修改数组后表格不自动重渲染——必须强制触发更新，最轻量方式是给
<el-table></el-table>加:key并每次点击后自增 - 别在模板里直接写
@click="expandRows.push(row.id)"—— push 不触发响应式，要用splice或concat
三级嵌套表格行怎么折叠
多级折叠不是简单 toggle，得靠层级标识区分父子关系。硬编码 data-level="1"/data-level="2" 是主流方案，但 JS 处理时容易漏掉边界条件。
典型陷阱：
稳妥做法是：每次点击都重新扫描当前行下方所有后续 <tr>，用 <code>data-parent-id 或 data-depth 匹配归属关系，再批量 toggle。
el-table 里实现点击文字展开行
Vue 生态下用 <el-table></el-table>，官方 expand-row-keys 是唯一可控入口，但文档没说清楚“如何响应点击”。
核心约束：
真实项目里最容易卡住的点：后端返回的 id 是 number 类型，但 expand-row-keys 要求 string，不转就永远匹配不上。
多级折叠的 DOM 关系映射比看起来复杂；箭头图标旋转只是表象，背后是父子行 visibility 的精确控制；框架组件看似封装了逻辑，反而更依赖你理解它的响应式约束条件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
