最干净的做法是将 defaultToolbar 设为空数组以彻底禁用默认工具栏。Layui 表格的打印、导出、筛选按钮由 defaultToolbar 控制,默认值为['filter','print','exports'],设为空数组可从源头杜绝误触;若需保留筛选功能,应手动添加 lay-event="LAYTABLE_COLS" 按钮并配合权限字段动态渲染。

直接禁用 defaultToolbar 是最干净的做法
Layui 表格的默认打印和导出按钮,本质是 defaultToolbar 配置项触发的。它默认值为 ['filter', 'print', 'exports'],只要你不显式覆盖它,这三个按钮就会自动出现。
- 不要试图用 CSS 或 JS 去隐藏按钮 DOM(比如
display: none),那只是掩耳盗铃:按钮仍在 DOM 中,事件仍可被触发,权限形同虚设 - 也不要用
defaultToolbar: ['filter']这种“留一个删两个”的写法——语义不清,且未来加新功能时容易漏配 - 正确做法是明确声明:不需要默认工具栏,就设为空数组
table.render({
elem: '#demo',
url: '/api/data',
toolbar: '#myToolbar', // 自定义工具栏容器(可选)
defaultToolbar: [], // ? 关键:彻底关闭默认按钮
cols: [[/* 列配置 */]]
});
这样,.layui-table-tool-self 下就不会生成任何带 lay-event="LAYTABLE_PRINT" 或 lay-event="LAYTABLE_EXPORT" 的按钮,从源头杜绝误触。
如果必须保留筛选按钮,只关掉打印和导出
有些场景下,你仍想用 Layui 内置的列筛选(filter),但不想暴露打印和导出——这时不能依赖 defaultToolbar 的“子集”写法,因为它的行为是全有或全无(Layui 2.8+ 之前甚至不支持部分启用)。
- 实际上,
defaultToolbar只控制“是否自动生成”,不控制“生成哪些”;它的数组项只是开关标记,不是白名单 - 所以,
defaultToolbar: ['filter']在多数版本中并不生效,仍会渲染全部三个按钮
更可靠的方式是:
- 依然设
defaultToolbar: []彻底关闭 - 然后手动在
toolbar容器里插入筛选按钮(它对应的是lay-event="LAYTABLE_COLS") - 其他按钮(如导出、打印)按需手写,配合权限逻辑控制是否创建
<script type="text/html" id="toolbarDemo">
<button class="layui-btn layui-btn-sm" lay-event="LAYTABLE_COLS"><i class="layui-icon"> 筛选列
{{# if(d.canExport) { }}
<button class="layui-btn layui-btn-sm" lay-event="LAYTABLE_EXPORT"><i class="layui-icon"> 导出
{{# } }}
</script>
注意:lay-event="LAYTABLE_COLS" 是筛选按钮唯一合法的事件标识,Layui 内部靠它触发列管理面板。
为什么不能用 $().hide() 或 .style.display = 'none'
这类“视觉隐藏”在 Layui 场景下尤其危险:
- 按钮 DOM 仍在,用户可通过开发者工具手动触发
click(),绕过所有前端权限判断 - 如果页面用了 Vue/React 等框架,DOM 隐藏后可能被框架重新渲染出来,造成闪现或状态错乱
- Layui 版本升级后,按钮结构微调(比如从
.layui-inline改成.layui-btn-group),选择器立即失效,隐藏逻辑崩溃 - 权限字段异步加载时,先渲染再隐藏,会出现“按钮闪一下再消失”,体验差且暴露权限边界
真正的权限控制,必须落在“是否创建这个元素”这一步。后端返回的每行数据里,应带明确布尔字段如 canPrint: false,前端模板用 {{# if(d.canPrint) { }} 控制按钮是否写入 DOM。
导出和打印按钮必须手写 + 绑定 lay-event
Layui 不关心按钮长什么样,只认 lay-event 属性:
-
lay-event="LAYTABLE_EXPORT"→ 触发内置导出逻辑(CSV/Excel) -
lay-event="LAYTABLE_PRINT"→ 触发内置打印逻辑(复制表格 DOM + 打印样式)
你可以把它们放在任意位置:表格上方、顶部导航栏、甚至弹窗里。样式、图标、文字完全自定义,不受 defaultToolbar 约束。
但要注意两点:
- 按钮必须在表格实例初始化之后才插入 DOM,否则事件绑定失败
- 若权限异步获取(比如调接口查
/auth?code=print),务必等权限返回后再渲染表格和按钮,避免“先无权显示,后补权限”导致 UI 错乱
最稳妥的顺序是:
- 先请求权限接口
- 根据返回的
canPrint、canExport字段拼装 toolbar HTML 或动态创建 button 元素 - 最后调用
table.render()
这样,按钮从一开始就不曾存在过,才是权限可控的起点。











