不能只靠 emptyText 设图标，因为 emptyText 使用 innerText 渲染，HTML 标签会被转义为纯文本；必须用 done 回调手动替换 .layui-table-empty 的 innerHTML 或通过 loading 的 CSS 覆盖实现。
layui table 空数据时怎么换图标
直接改 emptytext 不行，它只支持纯文本；想显示图标得用 loading 里的 text 配合 css 覆盖，或者更稳妥地——劫持 done 回调手动处理空状态。
为什么不能只靠 emptyText 设图标
emptyText 是个字符串字段，Layui 内部会直接用 innerText 渲染，所有 HTML 标签（包括 <i class="layui-icon"></i>）都会被转义成纯字符，图标自然不显示。
- 即使写成
emptyText: '<i class="layui-icon"></i> 暂无数据'，页面上也只会看到一串源码文字 - 这个限制在 Layui 2.8.x 和 2.9.x 中都存在，不是版本 bug，是设计如此
- 别试图用
render或templet在列里硬塞——空状态区域根本不会触发列渲染
用 done 回调 + DOM 操作替换空状态区域
这是最可控、兼容性最好、且不依赖 CSS 覆盖的方式。核心思路：等表格渲染完，检查数据长度，若为空，找到空提示容器并重写它的 innerHTML。
- 确保表格容器有唯一
id，比如id="demo" - 在
done回调里加判断：if (res.data.length === 0) - 定位空状态节点：
document.querySelector('#demo .layui-table-view .layui-table-body .layui-table[lay-id="demo"] ~ .layui-table-box .layui-table-empty') - 替换内容：
emptyEl.innerHTML = '<i class="layui-icon layui-icon-face-smile"></i> 还没有数据哦~' - 注意：图标 Unicode 要用实体（如
），或提前引入对应 class 的 iconfont
table.render({
elem: '#demo',
url: '/api/list',
cols: [[{field:'name', title:'姓名'}]],
done: function(res, curr, count) {
if (count === 0) {
const emptyEl = document.querySelector('#demo .layui-table-empty');
if (emptyEl) {
emptyEl.innerHTML = '<i class="layui-icon layui-icon-face-smile"></i> 还没有数据哦~';
}
}
}
});
如果坚持用 CSS 覆盖 loading 文字区（仅限带 loading 的场景）
这个方法只在你开启了 loading: true 且初始加载后返回空数据时有效；它本质是把 loading 提示“伪装”成空状态，适合简单列表页首次加载。
- 设置
loading: { text: '暂无数据' }，然后用 CSS 把文字换成图标 - 关键选择器：
.layui-table-loading .layui-table-loading-text - 覆盖方式示例：
.layui-table-loading-text::before { content: "\e61c"; font-family: "layui-icon" !important; } - 风险点：如果后续请求成功返回了数据，这个 loading 区域会被移除，但如果你在 done 里没清理 DOM，可能残留旧样式
- 不适用于用户主动刷新后返回空数据的场景（此时 loading 不再触发）
真正要稳，还是 done + DOM 替换那一套。Layui 的空状态 DOM 结构虽然藏得深，但位置固定，只要 selector 写准，改一次就能一直用。别省那几行 JS，不然下次升级 Layui 版本，空图标又变回文字，还得翻源码找原因。
