直接修改 emptyText 无效,因其仅支持纯文本且会被转义;应使用 done 回调替换 .layui-table-empty 内容,或通过 CSS 覆盖微调样式,并注意分页、count 字段及 initSort 的兼容性影响。
为什么直接改 emptyText 没用
emptytext 只接受纯字符串,layui 会用 innertext 渲染,所有 html 标签(比如 <i class="layui-icon"></i>)都会被转义成文字,图标自然不显示。这不是 bug,是 layui 2.8+ 的设计限制。哪怕写成 emptytext: '<i class="layui-icon"></i> 暂无数据',页面上也只会看到一串源码。
用 done 回调替换整个空状态 DOM 最可靠
这是唯一能自由加按钮、图片、SVG 或任意结构的方式,且不受 CSS 优先级和内联样式干扰。
- 在
table.render()的done回调里判断:if (count === 0) - 查到空容器:
document.querySelector('.layui-table-empty')(注意不是.layui-none) - 清除原有内联样式(如
padding: 40px 0),再写入自定义 HTML:done: function(res, curr, count) { if (count === 0) { var emptyEl = document.querySelector('.layui-table-empty'); if (emptyEl) { emptyEl.innerHTML = '<div style="text-align:center;padding:30px 0;"><i class="layui-icon layui-icon-add-1" style="font-size:28px;color:#1677ff"></i><p style="margin:12px 0 0;color:#666">暂无数据</p><button class="layui-btn layui-btn-sm">去添加</button></div>'; emptyEl.style.cssText = ''; // 清除内联样式 } } } - 别在
cols或page配置里写text: {none: 'xxx'}——它只改文字,还会偷偷加 padding,破坏你的布局
CSS 覆盖仅适用于纯图标/文字微调
如果只是想换图标或调颜色,用 CSS 更轻量,但必须处理好优先级和作用域。
- 替换整块背景(含图标+文字):
.layui-table-empty { background-image: url(/imgs/no-data.svg) !important; } - 只换图标、保留文字:隐藏默认 SVG 后重置伪元素,
.layui-table-empty svg { display: none; } .layui-table-empty::before { content: "\e61c"; font-family: "layui-icon" !important; } - 改文字样式必须带上下文:
.layui-table-view .layui-table-body .layui-none { color: #666 !important; font-size: 14px !important; },单写.layui-none无效,因为 Layui 插入时带了内联style - 确保你的 CSS 文件加载在
layui.css之后,否则!important都压不住内联样式
容易被忽略的兼容性坑
分页开启后,emptyText 和 text.none 基本失效;后端返回空数据时,count 字段不能缺,否则 Layui 当作请求失败,连 done 都不触发。另外,表格启用 initSort 时,某些旧版 Layui 会跳过空状态渲染——如果发现 done 里 count === 0 根本没进,先检查是否开了排序。


















