layui table表格怎么隐藏指定列?

陌伟姑娘_3897

陌伟姑娘_3897

2026-09-14

386人浏览

原创

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

layui table表格怎么隐藏指定列?

直接在列配置里加 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])可靠得多,加删列后不会崩

安全写法示例:

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载
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,都会在导出、响应式、工具栏交互等环节暴露问题。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2623

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

5683

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6670

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

6358

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

903

5

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

2026.10.22

20

11

Gradle Wrapper配置教程
Gradle Wrapper配置教程

本专题介绍Gradle Wrapper的基本作用,涵盖文件组成、生成方法、版本配置和任务调用,帮助你理解项目如何使用指定的Gradle版本,减少不同开发环境带来的构建差异。

2026.10.22

0

10

Golangci-lint检查器使用教程
Golangci-lint检查器使用教程

本专题整理Golangci-lint常用Linters的用途与配置方法,覆盖错误处理、无效代码、安全、复杂度、命名和依赖检查,帮助项目合理选规则。

2026.10.22

20

15

Gradle怎么构建Java项目
Gradle怎么构建Java项目

本专题介绍Gradle Java项目构建方法,涵盖Java插件配置、依赖声明、源码编译、测试执行和打包检查,帮助你理解各阶段的任务关系,逐步完成项目构建。

2026.10.22

0

10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 13万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11.3万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习