应由服务端返回明确的布尔字段(如canedit、candelete),在模板渲染时通过{{# if(d.canedit) { }}控制按钮显示,避免dom渲染后js操作导致权限逻辑泄漏。

toolbar模板里用{{# if() { }}控制按钮是否渲染
按钮该不该出现,得在服务端返回数据后、前端模板执行时就决定。不是等 DOM 渲染完再用 JS 去 hide 或 remove——那样权限逻辑就漏了。
后端必须为每行数据提供明确的布尔字段,比如 canEdit、canDelete,且值是 true/false 字面量,不能是字符串 "true"。否则模板里 {{# if(d.canEdit) { }} 会把非空字符串当真值,按钮照常显示。
- 模板写在
<script type="text/html" id="barDemo"></script>里,toolbar配置指向这个 ID - 按钮包裹在
{{# if(d.canEdit) { }}<button lay-event="edit">编辑</button>{{# } }}中 - 整列“操作”都不该出现?先判断是否有任意一行满足
canEdit || canDelete,再用cols的hide参数动态设为true或false
想彻底清空工具栏,直接设table.config.toolbar = ''
这不是隐藏,是让 Layui 根本不生成工具栏 DOM。适用于初始化时就确定不需要任何按钮的场景。
注意:table.reload() 后配置会重置,所以如果表格支持重载,这行赋值得放在 done 回调或 render 之前执行,不能只写一次。
- 修改后必须调用
table.reload()才生效 - 别在
toolbar配置里传null或undefined,Layui 会 fallback 到默认工具栏 - 如果只是临时清空(比如搜索无结果时),建议配合
data.length === 0做条件判断,避免误清
用display: none隐藏默认打印按钮要小心版本差异
Layui 自带的打印图标(.layui-icon-print)藏在 .layui-table-tool-self 里,不同版本 DOM 结构略有不同,直接写死选择器容易失效。
最稳的方式是先查图标,再往上找父级 .layui-inline 容器并隐藏;找不到就退到按顺序取第三个工具项——这是多数版本中打印按钮的位置。
- 务必在
table.on('toolbar(filter)', ...)或done回调里执行,确保工具栏已渲染 - 不要用
$('.layui-table-tool').hide(),它会把整个工具栏(含你自定义的按钮)一起藏掉 - 如果项目需长期维护,建议抽成函数并加注释说明适配的 Layui 版本范围
动态禁用按钮时,disabled 属性和 layui-btn-disabled 类缺一不可
只加 disabled="disabled",按钮视觉上还是正常颜色,用户点下去依然触发 tool 事件——因为 Layui 的事件是委托在 table 容器上的,原生 disabled 不影响冒泡。
必须同时做两件事:DOM 上加 disabled 属性 + layui-btn-disabled 类,并在 table.on('tool(filter)', ...) 回调开头加守卫判断,比如 if (obj.data.status === 0) return;。
- 手动改 DOM 后,
table.reload()会清空所有 class/attr,这类操作得封装成独立函数,在每次done或render后重新跑一遍 - 别用
layui-hide替代禁用——它只是隐藏,Tab 键仍能聚焦,语义错误且存在可访问性与安全风险 - 权限状态来自后端字段(如
d.isLocked),不是前端算出来的,否则容易被绕过
真正难的不是怎么写那几行代码,而是让后端稳定输出带类型、大小写一致、不含空格的布尔字段——这点一旦出错,前端所有条件渲染都会静默失效。











