讲师中心 微信公众号
AI工具推荐 视频效率加速

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

陌伟姑娘_3897

陌伟姑娘_3897

发布时间:2026-09-14 07:52:27

|

386人浏览过

|

来源于php中文网

原创

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

热门AI工具

更多
VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

相关专题

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

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

2623

2023.08.11

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

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

5723

2023.10.09

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

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

6690

2024.03.19

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

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

6398

2024.03.22

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

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

903

2024.05.22

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

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

20

2026.10.22

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

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

0

2026.10.22

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

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

20

2026.10.22

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

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

0

2026.10.22

热门下载

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

精品课程

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

共87课时 | 13万人学习

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

共89课时 | 11.3万人学习

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

共5课时 | 1.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn