必须用 data-column 语义化标记列并配合 .hidden-column 类控制显隐，而非索引操作：因索引易受字段顺序、空列、条件渲染等影响而失效，且需同步处理 thead/tbody/tfoot 中所有对应元素。
直接用 nth-child 或索引操作列，短期能跑通，长期必崩——后端字段顺序一变、前端加个空列、模板引擎插个条件渲染，整列控制就失效。真正可靠的做法，是给列打语义化标签，再用类名驱动显隐。
为什么不能只靠 cells[iCol] 隐藏列
看似简单：遍历每行的 cells[iCol]，设 style.display = 'none'。但实际踩坑无数：
- 表头
<th> 和数据行 <code><td> 列数不一致时（比如服务端动态删了某列），<code>iCol索引直接越界报错 -
display: none会破坏表格渲染模型，浏览器可能自动补空单元格或压缩宽度，导致对齐错乱 - 没有同步处理
<thead> 和 <code><tbody>，表头悬空、列宽塌陷是常态 <li>无法响应后续 DOM 变动（如 Vue/React 动态增删行），脚本不会自动重绑定</li> <h3>必须用 <code>data-column标记列身份这是所有稳定方案的前提。不是可选项，是强制项：
- 给每个
<th> 和对应所有 <code><td> 加相同 <code>data-column="status"属性，值全小写+短横线，如last-login-time - 避免用空格、大写或点号，否则
document.querySelectorAll('[data-column="user.name"]')会失败 - 若用 Vue/React 渲染，确认
v-bind:或data-column被正确透传，别被框架过滤掉 - 不要依赖
<col>或<colgroup></colgroup>控制显隐——它们不参与 CSS 渲染，display对其无效 - CSS 中只写一句：
.hidden-column { display: none; }，不干扰原有display类型（如table-cell） - 避免用
visibility: hidden——它保留布局空间，列宽残留，横向滚动条异常，对齐全乱 - JS 只负责开关类名：
document.querySelectorAll('[data-column="email"]').forEach(el => el.classList.toggle('hidden-column')) - 如果用了 Shadow DOM 或 scoped CSS，确认
.hidden-column能穿透作用域生效，必要时加:host ::ng-deep或全局样式
用
classList.toggle()切换.hidden-column类比直接改
style.display更安全、更解耦：隐藏整列时，
<thead> 和 <code><tbody> 必须同步处理 <p>这是最容易被忽略的硬性规则：</p> <ul><li>只隐藏 <code><tbody> 里的 <code><td>，却不碰 <code><thead> 的 <code><th>，浏览器会强制重排——有的补空白列，有的压缩宽度，结果不可预测 <li>操作前统一查：<code>const colEls = document.querySelectorAll('[data-column="phone"]')，它天然包含<th> 和所有 <code><td> <li>如果表格有 <code><tfoot>，也得一并纳入查询范围，否则页脚列错位 <li>不要在内联样式里写 <code>display: table-cell来“恢复”——不同浏览器对表格元素默认display值解析不一致 - 给每个
真正麻烦的从来不是写几行 JS，而是让语义标记、CSS 类、DOM 查询三者严丝合缝。漏掉任何一个环节，比如忘了给 <th> 加 <code>data-column，或者 scoped CSS 拦截了类名，功能当场失效，且很难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
