Layui数据表格如何设置列的默认隐藏状态

老浩小哥_8299

老浩小哥_8299

2026-07-17

446人浏览

原创

最轻量可靠的方式是初始化时用 hide: true 控制列显隐,Layui 2.8+ 原生支持,首帧即生效,避免闪屏;hide 必须为布尔值,固定列仍生效但自动重排,不可与 unresize 混用。

初始化时直接用 hide: true 控制列显隐

这是最轻量、最可靠的方式,layui 2.8+ 原生支持,无需额外 js。它在第一帧渲染时就生效,避免闪屏或 dom 错位。

  • hide: true 必须是布尔值,写成 hide: 'true' 或 hide: 1 都无效
  • 该列仍保留在数据源中,table.on('tool') 回调里 d.id 等字段照常可取
  • 如果列设置了 fixed: 'left' 或 fixed: 'right',hide: true 依然生效,但固定列会自动重排顺序
  • 别跟 unresize: true 混用——隐藏列本身不可拖拽,多写这一项纯属冗余

示例:

cols: [[
  {field: 'id', title: 'ID', hide: true},
  {field: 'username', title: '用户名'},
  {field: 'email', title: '邮箱', hide: true}
]]

动态切换列显隐必须等 done 回调再操作

想在表格渲染完成后隐藏某列(比如根据权限开关),不能在 layui.use 的回调里直接调用 table.hideCol() —— 此时表格实例还没完成 DOM 渲染,调了也白调。

  • 正确时机只在 table.render() 的 done 回调里,此时 res、curr、count 和 DOM 结构均已就绪
  • table.hideCol() 接收的是 field 值,不是标题文字或数组索引
  • Layui 2.7+ 才稳定支持该方法,旧版本建议升级或改用 hide: true 初始化
  • 恢复显示要用 table.showCol('field'),不是 toggle

示例:

table.render({
  elem: '#demo',
  url: '/api/list',
  done: function(res, curr, count) {
    table.hideCol('email');
  }
});

导出 Excel 时隐藏列不自动过滤

这是高频盲区:hide: true 只影响 UI 层,导出逻辑默认读取原始数据源,所有字段照常输出,和列是否隐藏无关。

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

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

下载
  • 若需导出与视图一致,必须手动干预:用 export.columns 显式指定字段,或用 exportData 钩子返回精简后的数组
  • export.columns 中的 field 名必须和列配置完全一致,拼错一个字母就会导致 Excel 列错位或报错
  • 如果表格启用了分页,table.cache 只存当前页数据;要导出全部,得自己请求全量接口再按列过滤

示例(导出仅含用户名和邮箱):

export: {
  columns: [
    {field: 'username'},
    {field: 'email'}
  ]
}

移动端响应式隐藏要 minWidth + hide: true 联用

hide: true 本身不具备响应式能力,单独设它不会随屏幕变小而自动隐藏。真正在移动端起作用的是 minWidth 和 hide: true 的组合逻辑。

  • 必须同时写 minWidth: 768 和 hide: true,缺一不可;Layui 内部只对 minWidth > screen.width 且 hide === true 的列加 display: none
  • minWidth 必须是数字(如 768),不能带单位,也不能写 "768px"
  • 该列不能设 fixed,否则响应式逻辑被跳过
  • 别用 CSS 媒体查询强行隐藏,会破坏列宽计算,导致表头/内容错位、横向滚动异常

示例(PC 显示、手机隐藏操作列):

{field: 'action', title: '操作', minWidth: 768, hide: true}
容易被忽略的是:列是否参与宽度计算、排序、导出、工具栏事件,其实都取决于它是否出现在 cols 配置里,而不是 DOM 是否可见。哪怕加了 hide: true,只要 field 存在,它就在上下文里活着。

相关文章

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

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

下载

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

相关专题

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

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

2023.08.11

2283

5

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

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

2023.10.09

4923

6

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

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

2024.03.19

6010

13

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

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

2024.03.22

5498

10

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

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

2024.05.22

783

5

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

2026.09.30

80

10

LLVM RISC-V参数配置教程
LLVM RISC-V参数配置教程

本专题介绍LLVM对RISC-V基础ISA和扩展的支持方式,涵盖RV32、RV64、标准扩展、实验性扩展、厂商扩展、-menable-experimental-extensions和版本差异。

2026.09.30

80

14

LLVM IR中间表示入门指南
LLVM IR中间表示入门指南

本专题整理LLVM IR的核心概念,包括中间表示作用、模块结构、函数、基本块、SSA形式、类型系统和常见语法,帮助新手理解LLVM编译流程中的关键层。

2026.09.30

40

12

PDF转图片方法
PDF转图片方法

需要把 PDF 页面用于上传、预览、分享或图片归档时,PDF 转图片方法专题整理 JPG/PNG 格式选择、逐页导出、清晰度设置、批量下载和结果检查等流程,帮助用户稳定完成 PDF 图片化处理。

2026.09.30

40

26

热门下载

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

精品课程

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

共87课时 | 12.7万人学习

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

共89课时 | 10.9万人学习

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

共5课时 | 1.6万人学习