text.none不能改图标是因为layui对值调用layui.util.escape()转义html字符防xss;推荐用css覆盖(需display:none原svg、伪元素content、加载顺序)、done回调插入html(清空内联样式、settimeout、处理固定表头)或background-image整体替换。

为什么text.none不能改图标
你写text: { none: '<i class="layui-icon"></i> 暂无数据' },页面上只会原样显示这串 HTML 字符,不会渲染成图标。Layui 内部对这个值调用了 layui.util.escape(),所有 和 <code>> 都被转义成 、<code>> —— 这不是 bug,是防 XSS 的硬性设计。
用 CSS 覆盖图标最轻量(只换图标不换结构)
如果只是想把默认的「暂无数据」SVG 图标换成另一个字体图标(比如笑脸、加号),CSS 是最快方式,但必须注意三点:
-
.layui-table-empty svg一定要先display: none,否则新图标会和旧 SVG 叠在一起 - 用伪元素重置图标:
.layui-table-empty::before { content: "\e61c"; font-family: "layui-icon" !important; } - 你的 CSS 文件必须加载在
layui.css之后,否则!important都压不住内联样式 - 文字颜色/大小要带上下文:
.layui-table-view .layui-table-body .layui-none { color: #666 !important; },单写.layui-none无效
用 done 回调插入自定义 HTML(支持图片、按钮、链接)
需要放图片、加「去添加」按钮或响应式布局?必须走 done 回调手动操作 DOM。关键动作不能漏:
- 判断依据用
count === 0(服务端分页)或Array.isArray(res.data) && res.data.length === 0(前端分页),别用res.data === [] - 查元素必须用
document.querySelector('.layui-table-empty'),不是.layui-none(那是老版本 selector) - 拿到元素后第一件事:清空内联样式 ——
emptyEl.style.cssText = '',否则padding: 40px 0会撑乱你的图片居中 - 用
setTimeout(() => { ... }, 0)包一层,避免 DOM 尚未就绪导致查不到节点 - 固定表头场景下,
.layui-table-fixed-l .layui-table-body .layui-table-empty也要同步处理,否则左侧空白区可能不显示
背景图整体替换(适合设计统一的空状态图)
如果你有一张包含图标+文字的 SVG 或 PNG,直接用 CSS 替换整块背景最省事:
.layui-table-empty { background-image: url(/imgs/no-data.svg) !important; background-size: contain; background-repeat: no-repeat; background-position: center; }
注意:background-image 会覆盖掉所有子元素(包括你之前注入的 img 或 i),所以它和 HTML 注入方案互斥;另外,这张图的尺寸要适配默认容器高度(约 80px),否则可能裁切或留白。
最容易被忽略的是:每次 table.reload() 或搜索后,.layui-table-empty 会被重新生成,你之前注入的 HTML 或绑定的事件全失效 —— 所有逻辑必须塞进 done 回调里,且每次都要执行。











