layui table怎么在无数据时显示自定义SVG插画-Layui教程-PHP中文网

text.none不能直接写是因为其值被layui.util.escape()强制转义为纯文本，这是layui 2.8+的xss防护设计；正确做法是在done回调中判断数据为空后，清空.layui-table-empty内联样式并注入自定义html。

layui table怎么在无数据时显示自定义svg插画

为什么`text.none`不能直接写`<svg></svg>`

因为text.none的值会被layui.util.escape()强制转义，所有 HTML 标签（包括<svg></svg>、<use></use>）都会变成纯文本显示在页面上。你看到的不是插画，而是一串源码，比如<svg>...。这不是 bug，是 Layui 2.8+ 的主动 XSS 防护设计。

用`done`回调替换`.layui-table-empty`内容

这是唯一能插入真实 SVG 插画的方式，且不受转义干扰：

判断依据必须是count === 0（服务端分页）或Array.isArray(res.data) && res.data.length === 0（前端分页），不能只看res.data === []——它可能是undefined
目标节点是.layui-table-empty，不是.layui-none（后者是旧版或错误 selector）
务必加setTimeout(() => {...}, 0)，否则 DOM 可能还没挂载好，查不到该节点
拿到emptyEl后第一件事是清空内联样式：emptyEl.style.cssText = ''，否则默认的padding: 40px 0会撑乱 SVG 布局

emptyEl.innerHTML可写任意合法 HTML，例如：

<div style="text-align:center;padding:30px 0;">
<svg viewbox="0 0 200 120" width="160"><use xlink:href="#illustration-empty"></use></svg><p style="margin-top:12px;color:#999;">暂无数据</p>
</div>

确保自定义 SVG 已注入 DOM

如果用<use xlink:href="#xxx"></use>引用外部定义，必须提前把 SVG <defs></defs> 或完整图标定义注入到顶部，例如：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

document.body.insertAdjacentHTML('afterbegin', `<svg xmlns="http://www.w3.org/2000/svg" style="display:none;"><defs><symbol id="illustration-empty" viewbox="0 0 200 120">...</symbol></defs></svg>`);

不支持在done里异步 fetch SVG 内容——渲染时机错乱会导致图标闪一下再消失。

CSS 覆盖仅适合静态背景图

如果 SVG 是单张固定尺寸插画（如 PNG 替代方案），可用 CSS 背景图方式更轻量：

.layui-table-empty { background-image: url(/imgs/empty-illustration.svg) !important; background-size: 120px; background-repeat: no-repeat; background-position: center 30px; }
但注意：这种方式无法响应式缩放、不能添加文字说明、不支持交互元素（如按钮）
必须确保你的 CSS 文件加载在layui.css之后，否则!important也压不住内联样式

最常被忽略的是：没清emptyEl的内联样式，或误用.layui-none这个过时类名；还有人把 SVG 定义漏掉、或放在done内部动态注入，结果插画始终不出现。