layui table隐藏列应直接在cols配置中设hide: true,动态修改需setcols+reload配合,导出需手动过滤cols,禁用css隐藏以防错位。

直接在列配置里加 hide: true,别找 hideCol 方法——它不存在,Layui 的 table 模块压根没这个 API。
初始化时隐藏列:写对 hide 值就行
这是最稳、最快、不闪屏的方式。Layui 2.8+ 原生支持,渲染第一帧就生效。
-
hide必须是布尔值true,写成hide: 'true'或hide: 1都无效 - 该列 DOM 不生成、不占宽度、不影响排序,但
data和table.on('tool')里的字段依然完整可取 - 如果列设了
fixed: 'left'或fixed: 'right',hide: true仍生效,固定区会自动重排 - 别和
unresize: true一起写——隐藏列本身不可拖拽,多写纯属冗余
示例:
table.render({
elem: '#demo',
cols: [[
{field: 'id', title: 'ID', hide: true},
{field: 'username', title: '用户名'},
{field: 'email', title: '邮箱', hide: true}
]]
});
动态隐藏列:必须 setCols + reload,漏掉任一都不行
setCols 只改内部配置,不重绘;reload 才真正刷新 DOM。只调一个等于白干。
-
setCols接收的是完整cols数组(不是单个列对象),结构必须和初始化一致,否则表头错位或列宽丢失 - 深拷贝推荐用
structuredClone,别用JSON.parse(JSON.stringify())——会丢掉templet函数 -
reload时不传where和page,表格会回到第 1 页、丢失搜索条件 - 按
field查找列比硬写索引(如cols[0][2])可靠得多,加删列后不会崩
安全写法示例:
const newCols = structuredClone(tableIns.config.cols);
newCols[0].find(col => col.field === 'email').hide = true;
tableIns.reload({
cols: newCols,
where: tableIns.config.where,
page: { curr: tableIns.config.page.curr }
});
导出 Excel 时隐藏列不自动过滤,得手动指定 cols
UI 上看不见,导出时照常输出全部字段——这是设计行为,不是 bug。想导出和视图一致,必须干预。
- 用
export.columns显式传一维数组,field名要和原始列配置完全一致(大小写敏感) - 如果用了多级表头(
children),得自己 flatten,只保留叶子节点 - 分页状态下
table.cache只存当前页数据;要导出全部,得自己请求全量再按列过滤 - 别信
exportData钩子能自动继承hide状态——它不读配置,得手动映射字段
导出示例:
table.exportFile({
data: table.cache.demo,
cols: table.config.demo.cols[0].filter(col => !col.hide)
});
千万别用 CSS 或 jQuery 直接隐藏 td/th
看似快,实则埋雷:表头和内容列数错位、横向滚动对不齐、导出/打印/获取选中数据时该列仍出现。
-
$("[data-field='id']").hide()或style="display:none"都会破坏 Layui 内部列对齐逻辑 - 隐藏列参与排序和筛选是默认行为,若不需要,得显式加
sort: false - 固定列隐藏后,固定区宽度不会自动收缩,必要时手动调
table.resize()
复杂点在于:列显隐控制本质是「配置驱动」,不是「样式驱动」。所有绕过 cols 配置的 hack,都会在导出、响应式、工具栏交互等环节暴露问题。











