hide: true 是最稳定的列隐藏方式,仅影响视觉渲染且不占空间、不闪屏,但导出时仍需手动过滤;动态切换必须深拷贝配置并调用 reload(),不可直接修改 cols 或用 CSS 隐藏。
初始化时直接用 hide: true 最稳
列在渲染第一帧就消失,不占空间、不闪屏、不影响排序和数据读取。必须写成布尔值 true,不是字符串 'true' 或数字 1。
-
hide: true只影响视觉渲染,data里该字段依然完整,table.on('tool')回调中也能正常取到 - 如果列设了
fixed: 'left'或fixed: 'right',hide: true仍生效,但固定区宽度不会自动收缩,必要时手动调table.resize() - 别和
unresize: true混用——隐藏列本身不可拖拽,多写这一项没意义,还可能干扰样式 - 示例:
{field: 'id', title: 'ID', hide: true}
动态切换显示/隐藏必须走 reload()
想运行时控制(比如点按钮切列显隐),不能改 tableIns.config.cols 后直接生效,必须深拷贝 + reload() 重绘整张表。
- 漏掉
reload()是最高频错误:只改配置,DOM 和数据上下文都不变 - 别用
JSON.parse(JSON.stringify())深拷贝——会丢掉templet函数;现代浏览器优先用structuredClone(),否则手动遍历保留函数引用 -
reload()时不传where和page,表格会回到第 1 页、丢失搜索条件 - 按
field查找列比靠数组索引更可靠,避免加删列后索引偏移
exportExcel 不认 hide,导出要单独过滤
隐藏列在 UI 上看不见,但 table.exportExcel() 默认仍导出全部字段,这是设计行为,不是 bug。
- 必须显式传
cols参数,且是展平后的一维数组,field名要和原始数据严格一致(大小写敏感) - 别依赖
table.config.xxx.cols—— 它只存初始化快照,reload()后不会自动更新 - 如果用了多级表头(
children),导出前得自己 flatten,只保留叶子节点 - 示例:
table.exportExcel({ data: table.cache.demo, cols: [table.config.demo.cols[0].filter(col => col.field !== 'id')] })
千万别用 CSS 或 jQuery 直接隐藏 td/th
$("[data-field='id']").hide() 看似简单,但会破坏 Layui 内部列对齐逻辑。
- 表头
th和内容行td渲染分离,单独隐藏其中一方会导致横向滚动错位 - 打印、导出、
getSelectData()时该列仍出现,和 UI 表现不一致,容易引发逻辑误判 - 固定列区域宽度计算异常,甚至触发重排错乱
- 工具栏事件回调里的
data虽然完整,但开发者常误以为“DOM 没了,data 也没了”,写出错误判断
hide: true 是渲染层开关,exportExcel 是数据层操作,两者完全解耦——你得在两个地方分别处理,不能指望一处设置全局生效。











