Layui表格动态显隐列必须通过tableIns.reload({cols: newCols})传入完整新列配置实现；直接修改cols数组或仅操作DOM（如display:none）无效，因表头与单元格需同步响应hide字段，且reload时须显式保留page、where等参数。
如何用 JavaScript 动态控制 Layui 数据表格的列显隐
layui 的 table.render() 渲染后，列配置已固化在实例中，不能直接改 cols 数组再重绘。必须通过实例方法 setcolswidth() 配合手动 dom 控制 + 列宽重算才能生效，否则会出现错位或隐藏不彻底。
关键操作：先改列配置，再调用 reload() 并保留分页状态
直接修改 table.config.cols 不会自动同步到视图；正确做法是拿到当前 table 实例，用 reload() 重新加载，并传入更新后的 cols。注意要显式传入 page 参数，否则会跳回第一页：
const tableIns = table.render({
elem: '#demo',
url: '/api/list',
cols: [[
{type: 'checkbox'},
{field: 'id', title: 'ID'},
{field: 'username', title: '用户名'},
{field: 'email', title: '邮箱', hide: true} // 默认隐藏
]]
});
// 外部按钮点击时显示“邮箱”列
document.getElementById('showEmail').onclick = function(){
const cols = tableIns.config.cols[0].map(col => {
if (col.field === 'email') return {...col, hide: false};
return col;
});
tableIns.reload({
cols: [cols],
page: {curr: tableIns.page.curr}, // 关键：保持当前页码
where: tableIns.where // 保持搜索条件（如有）
});
};
为什么不能只操作 DOM？th 和 td 必须同步隐藏
Layui 表格的表头 th 和内容行 td 是分离渲染的，单独用 display: none 隐藏某列的 th，会导致后续 td 错位。必须让两者同时响应 hide 字段：
-
hide: true会同时给对应th和所有td加上layui-hide类 - 手动加
style="display:none"只作用于当前元素，破坏列对齐逻辑 - 如果用了
fixed: 'left'或'right'，隐藏列还会影响固定列计算，必须走reload()
兼容性注意：Layui 2.8+ 支持 hide，旧版需自行 patch
Layui 2.5.6 到 2.7.x 对 hide 字段的支持不稳定，部分版本 reload 后列宽错乱。若无法升级，可临时用这个补丁绕过：
// 在 reload 后强制重设列宽（仅限旧版）
tableIns.reload({...});
setTimeout(() => {
tableIns.setColsWidth(); // 强制重算列宽
}, 30);
真正稳定的方案仍是升级到 Layui 2.8+，并始终通过 hide 字段 + reload() 控制，不要试图用 CSS 或 DOM 操作“取巧”。列配置和数据渲染强耦合，脱离配置直接动 DOM，后面分页、排序、工具栏都会出问题。
