hide: true是唯一不影响数据读取的可靠隐藏方式,它跳过DOM渲染但保留原始数据在table.cache和事件data中,需严格匹配field、用structuredClone深拷贝并reload生效。
直接用 hide: true,别动 dom 或 css 隐藏 —— 这是唯一不影响数据读取的可靠方式。
初始化时设 hide: true 最稳妥
列配置里加 hide: true,Layui 渲染时跳过该列 DOM,但原始数据仍完整保留在 table.cache 和事件回调的 data 对象中。
-
hide必须是布尔值true,写成'true'、1或'yes'都无效 - 必须带
field,且和后端返回字段名严格一致,否则tool回调里data.id会是undefined - 如果列只是用来取 ID 做操作(比如删除按钮),建议加
unresize: true+width: 0,防止表头残留空白
示例:
table.render({
elem: '#demo',
cols: [[
{field: 'id', title: 'ID', hide: true, unresize: true, width: 0},
{field: 'username', title: '用户名'},
{field: 'email', title: '邮箱'}
]]
});
动态隐藏必须走 setCols + reload
想运行时切换显隐,不能改 tableIns.config.cols 后直接用,必须深拷贝后传给 reload,否则数据上下文断裂、data 拿不到隐藏列字段。
- 漏掉
reload()是最常见错误:只调setCols不重载,DOM 不变,data也还是旧结构 - 不要用
JSON.parse(JSON.stringify())深拷贝 —— 会丢掉templet函数,改用structuredClone(现代浏览器)或手动遍历保留函数引用 - reload 时若没传
where或page,表格会回到第 1 页、丢失搜索条件
安全写法:
const newCols = structuredClone(tableIns.config.cols);
newCols[0].find(col => col.field === 'id').hide = true;
tableIns.reload({ cols: newCols, where: tableIns.config.where, page: { curr: tableIns.config.page.curr } });
别用 CSS 或 jQuery 隐藏列
用 $("[data-field='id']").hide() 或 display: none 看似快,但会导致三类问题:
- 表头和内容列数错位,横向滚动时对不齐
-
table.on('tool')回调里的data虽然完整,但开发者容易误以为“DOM 没了,data 也没了”,写错逻辑 - 导出 Excel、打印、
getSelectData时该列仍出现,和预期不符
隐藏列参与排序和筛选时要小心
hide: true 的列默认仍响应点击排序(除非显式关掉 sort: false),也参与工具栏筛选条件匹配。如果你不希望它被交互影响:
- 加
sort: false关闭排序箭头和行为 - 确保
filter工具栏没配该字段,或在done回调里过滤掉field === 'id'的筛选项 - 如果 ID 是字符串类型(如 UUID),又开了
sort: true,排序会按字典序错乱,此时应禁用排序或改用sortType: 'custom'
真正容易被忽略的是:hide: true 只控制渲染,不改变数据链路 —— 所以只要 field 对得上、reload 步骤完整,data 就始终可读;但一旦混用 CSS 隐藏或漏 reload,这个链路就断了,而且很难定位是哪一步出的问题。


















