layui table.print() 去掉指定列的原理是手动过滤原 cols 数组,构造仅含目标列的新二维 cols 配置传入打印方法,而非依赖 CSS 隐藏或 DOM 操作。
layui table print 去掉指定列的原理是重置 cols 配置
layui 的 table.print() 不会自动识别你当前隐藏了哪些列,它只按初始化时传入的 cols 渲染。所以“去掉不需要的列”本质不是隐藏,而是临时构造一个不含目标列的新 cols 数组传给打印方法。
常见错误现象:table.print() 依然打出所有列,哪怕你在页面上用 hideCol 隐藏过;或者打印后列宽错乱、表头文字被截断——这通常是因为新 cols 里漏掉了 width 或 align 等关键配置。
- 必须手动提取原
cols,再用filter()踢掉field匹配的列项 - 不能只删
title,要整条列配置对象移除,否则可能引发渲染异常 - 如果某列设置了
templet,打印时默认不执行(纯文本输出),无需额外处理,但要注意 templet 返回的内容是否含 HTML 标签——打印会直接显示标签字符,不是渲染效果
用 table.print({ cols: [...] }) 覆盖默认列配置
这是最直接、兼容性最好的方式。你得自己拼一个干净的 cols,只留想打印的列。
使用场景:需要固定导出结构,比如报表类页面,每次打印都只保留“编号、姓名、部门、入职时间”四列,其余操作列、状态徽章、按钮全部剔除。
示例(假设原表格有 id、username、role、operate 四列,要去掉 operate):
const originalCols = table.config.yourTableId.cols[0];
const printCols = originalCols.filter(col => !['operate'].includes(col.field));
table.print({
id: 'yourTableId',
cols: [printCols] // 注意:cols 是二维数组,外层数组包着第一行表头
});
-
table.config.xxx.cols是获取当前表格初始化时的列配置,不是 DOM 上看到的实时列 - 如果你用了多级表头(
cols是三层嵌套),filter要作用在最内层数组上,别误操作到外层 - 别忘了保留
field和title,其他如sort、toolbar、event这些打印用不到的字段可以安全忽略
避免用 CSS 隐藏列来“骗过”打印
有人试过给某列加 display: none 或 layui-hide,指望打印时自动跳过——不行。layui 打印逻辑不读取样式,只读 cols 配置和数据源。
性能影响:CSS 隐藏列对打印无任何帮助,反而可能让页面样式和打印预览不一致,调试更费时间。
- 打印窗口里仍会出现该列,只是内容为空或显示 “undefined”
- 如果该列设了
width: 200px,即使隐藏了,打印时仍占 200px 宽度,挤压其他列 - 移动端适配或缩放打印时,隐藏列残留的空白更容易暴露问题
动态列场景下,field 必须唯一且稳定
如果你的表格列是后端动态返回的,cols 拼接靠 JS 组装,那打印前过滤就依赖 field 字段的准确性。一旦 field 重复、为空或带空格,filter 就会失效。
容易被忽略的地方:后端返回的 field 可能是 "user_name",但前端写成 "username",导致过滤条件永远不匹配;或者某列没设 field,layui 默认用索引当 field(如 "LAY_TABLE_INDEX"),这种列无法用名字过滤,只能靠位置下标剔除——但下标不稳定,换列序就崩。
- 务必检查
console.log(table.config.yourTableId.cols)确认实际field值 - 动态列建议统一由后端返回规范
field,前端不做转换,避免大小写、下划线等差异 - 真要用下标过滤,写成
originalCols.filter((col, i) => ![3, 5].includes(i)),但仅限列结构绝对固定时用
cols 配置,它才照做。复杂点在于动态列和多级表头的嵌套层级,一不留神就 filter 错数组层级。



















