最轻量可靠的方式是初始化时用 hide: true 控制列显隐,Layui 2.8+ 原生支持,首帧即生效,避免闪屏;hide 必须为布尔值,固定列仍生效但自动重排,不可与 unresize 混用。
初始化时直接用 hide: true 控制列显隐
这是最轻量、最可靠的方式,layui 2.8+ 原生支持,无需额外 js。它在第一帧渲染时就生效,避免闪屏或 dom 错位。
-
hide: true必须是布尔值,写成hide: 'true'或hide: 1都无效 - 该列仍保留在数据源中,
table.on('tool')回调里d.id等字段照常可取 - 如果列设置了
fixed: 'left'或fixed: 'right',hide: true依然生效,但固定列会自动重排顺序 - 别跟
unresize: true混用——隐藏列本身不可拖拽,多写这一项纯属冗余
示例:
cols: [[
{field: 'id', title: 'ID', hide: true},
{field: 'username', title: '用户名'},
{field: 'email', title: '邮箱', hide: true}
]]
动态切换列显隐必须等 done 回调再操作
想在表格渲染完成后隐藏某列(比如根据权限开关),不能在 layui.use 的回调里直接调用 table.hideCol() —— 此时表格实例还没完成 DOM 渲染,调了也白调。
- 正确时机只在
table.render()的done回调里,此时res、curr、count和 DOM 结构均已就绪 -
table.hideCol()接收的是field值,不是标题文字或数组索引 - Layui 2.7+ 才稳定支持该方法,旧版本建议升级或改用
hide: true初始化 - 恢复显示要用
table.showCol('field'),不是 toggle
示例:
table.render({
elem: '#demo',
url: '/api/list',
done: function(res, curr, count) {
table.hideCol('email');
}
});
导出 Excel 时隐藏列不自动过滤
这是高频盲区:hide: true 只影响 UI 层,导出逻辑默认读取原始数据源,所有字段照常输出,和列是否隐藏无关。
- 若需导出与视图一致,必须手动干预:用
export.columns显式指定字段,或用exportData钩子返回精简后的数组 -
export.columns中的field名必须和列配置完全一致,拼错一个字母就会导致 Excel 列错位或报错 - 如果表格启用了分页,
table.cache只存当前页数据;要导出全部,得自己请求全量接口再按列过滤
示例(导出仅含用户名和邮箱):
export: {
columns: [
{field: 'username'},
{field: 'email'}
]
}
移动端响应式隐藏要 minWidth + hide: true 联用
hide: true 本身不具备响应式能力,单独设它不会随屏幕变小而自动隐藏。真正在移动端起作用的是 minWidth 和 hide: true 的组合逻辑。
- 必须同时写
minWidth: 768和hide: true,缺一不可;Layui 内部只对minWidth > screen.width且hide === true的列加display: none -
minWidth必须是数字(如768),不能带单位,也不能写"768px" - 该列不能设
fixed,否则响应式逻辑被跳过 - 别用 CSS 媒体查询强行隐藏,会破坏列宽计算,导致表头/内容错位、横向滚动异常
示例(PC 显示、手机隐藏操作列):
{field: 'action', title: '操作', minWidth: 768, hide: true}
容易被忽略的是:列是否参与宽度计算、排序、导出、工具栏事件,其实都取决于它是否出现在 cols 配置里,而不是 DOM 是否可见。哪怕加了 hide: true,只要 field 存在,它就在上下文里活着。


















