应使用done回调配合DOM操作替换空状态区域。当count为0或data为空时，用setTimeout确保DOM就绪，再通过document.querySelector定位.layui-none节点，以innerHTML插入带样式的图片HTML，因text.none仅支持纯文本不解析HTML。
表格空数据时如何触发自定义渲染
layui 的 table.render() 在 data 为空数组或 count === 0 且启用了分页时，会自动显示默认的「暂无数据」文字，但**不会自动调用任何回调函数来让你插入图片**。关键在于：必须主动拦截空状态渲染逻辑，靠 done 回调 + dom 操作实现。
用 done 回调判断并替换空状态区域
done 是表格渲染完成后的钩子，此时 DOM 已就位，能安全操作。重点是检测 res.count === 0 或 res.data.length === 0，再定位到表格底部的空状态容器（Layui 内部用 .layui-table-box .layui-table-body .layui-none）。
实操建议：
- 在
done中先用setTimeout(() => {...}, 0)确保 DOM 渲染完毕（避免因异步时机导致找不到元素） - 用
document.querySelector('.layui-table-body .layui-none')获取空提示节点，再用innerHTML替换为带<img>的 HTML - 务必加样式控制图片尺寸和居中，否则可能溢出或错位，例如：
style="text-align:center;padding:40px 0;" - 如果表格启用了
height，空状态区域可能被隐藏，需确保父容器高度足够或设置min-height
完整示例代码（含图片路径与样式）
table.render({
elem: '#demo',
url: '/api/list',
cols: [[{field:'id', title: 'ID'}]],
page: true,
done: function(res, curr, count) {
if (count === 0) {
setTimeout(() => {
const noneEl = document.querySelector('.layui-table-body .layui-none');
if (noneEl) {
noneEl.innerHTML = `
<div style="text-align:center;padding:40px 0;">
<img src="/assets/empty.png" alt="暂无数据" style="width:80px;height:auto;">
<p style="margin-top:12px;color:#999;">暂无数据</p>
</div>
`;
}
}, 0);
}
}
});
为什么不用 text: { none: 'xxx' }？
Layui 的 text.none 配置项只支持纯文本，不解析 HTML —— 即使你传入 <img> 标签，也会被当作字符串原样显示，不会渲染成图片。这是最容易踩的坑：以为配置就能解决，结果页面上直接看到一串 HTML 源码。
所以必须绕过该配置，用 DOM 操作重写内容。另外注意：如果表格开启了服务端分页，res 中的 count 才可靠；若用前端分页（data 数组），则应判断 res.data.length === 0。
空状态 DOM 结构依赖 Layui 版本，v2.8+ 基本稳定，但若升级后发现图片不显示，优先检查 .layui-none 是否还存在、是否被其他 CSS 隐藏。
