text.none 不能插图片是因为 Layui 对其值执行了 layui.util.escape() 转义防 XSS,导致 HTML 标签被编码;应改用 done 回调操作 .layui-table-empty 节点,清空内联样式后注入 HTML。
直接用 text: { none: '...' } 配置无效——它只接受纯文本,所有 html 标签都会被转义成字符串显示,比如你写 <img src="x">,页面上就真看到这串字符。
为什么 text.none 不能插图片
Layui 内部对 text.none 的值做了 layui.util.escape() 处理,目的是防 XSS,结果就是 < 和 > 全被编码成 、<code>>。这不是 bug,是设计行为。哪怕你传入带 <i class="layui-icon"></i> 的字符串,也只会原样打印出来。
必须用 done 回调替换 .layui-table-empty
done 是唯一能安全操作空态 DOM 的时机,此时表格结构已渲染完毕,且 .layui-table-empty 容器一定存在(注意不是 .layui-none,那是老版本或错误 selector)。
- 判断依据优先用
count === 0(服务端分页),前端分页则看res.data.length === 0 - 务必加
setTimeout(..., 0)或至少10ms 延迟,否则可能查不到.layui-table-empty节点 - 拿到元素后先清空内联样式:
emptyEl.style.cssText = '',否则 Layui 自带的padding: 40px 0会撑乱你的布局 -
emptyEl.innerHTML可以写任意 HTML:<img src="/imgs/empty.png" style="width:80px"><p>暂无数据</p>
CSS 覆盖仅适合简单图标替换
如果只是换图标、调颜色、改文字大小,CSS 更轻量,但要注意作用域和优先级:
- 整块背景替换:
.layui-table-empty { background-image: url(/imgs/no-data.svg) !important; } - 只换图标(保留文字):
.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; },单写.layui-none无效 - 别在
table.render()里配text: { none: 'xxx' },它会偷偷给.layui-table-empty加内联 padding,干扰你的 CSS
最常被忽略的是:done 里没清内联样式,或者用了 .layui-none 这个过时 selector;还有人把判断逻辑写成 res.data === [],其实 res.data 可能是 undefined,得用 Array.isArray(res.data) && res.data.length === 0 才稳妥。


















