Layui table如何自定义无数据时的提示图标-Layui教程-PHP中文网

text.none不能放图标是因为它只接受纯字符串且用innerText渲染，HTML标签会被转义；最可靠方式是在done回调中判断count===0后操作.layui-table-empty节点并清空内联样式。

为什么 `text.none` 不能放图标？

因为 text.none 只接受纯字符串，layui 内部用 innertext 渲染，所有 html 标签（比如 <i class="layui-icon"></i>）都会被转义成文字，页面上直接显示源码。这不是 bug，是 layui 2.8+ 的明确设计限制。

`done` 回调里替换 `.layui-table-empty` 最可靠

这是唯一能自由插入图片、SVG、按钮或任意结构的方式，且不受 CSS 优先级干扰。关键点：

必须判断 count === 0，而不是 res.data.length === 0 —— 分页场景下后者可能为 0 但 count 非 0，表格会渲染空行而非触发空态
目标容器是 .layui-table-empty（不是 .layui-none），它在表格主体外独立存在
务必先清空原有内联样式：emptyEl.style.cssText = ''，否则 padding 会撑高自定义内容
建议加 setTimeout 延迟 0ms，确保 Layui 已挂载该节点

done: function(res, curr, count) {
  if (count === 0) {
    const emptyEl = document.querySelector('.layui-table-empty');
    if (emptyEl) {
      emptyEl.innerHTML = '<div style="text-align:center;padding:30px 0;">
<i class="layui-icon layui-icon-face-smile" style="font-size:28px;color:#1677ff"></i><p style="margin:12px 0 0;color:#666">暂无数据</p>
</div>';
      emptyEl.style.cssText = '';
    }
  }
}

只换图标、不动文字？用 CSS 更轻量

如果只是想改图标颜色、大小或替换成字体图标，CSS 覆盖更简单，但要注意选择器精度和优先级：

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

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

下载

隐藏默认 SVG：.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 无效
背景图整体替换：.layui-table-empty { background-image: url(/imgs/no-data.svg) !important; }

搜索/重载后空状态消失？得手动清理残留

table.reload() 或搜索后，Layui 会重新生成 DOM，你之前注入的 HTML 会被清空。所以每次 done 都要重新判断并写入 —— 别指望一次设置永久生效。另外注意：

固定表头场景下，.layui-table-fixed-l .layui-table-body 和 .layui-table-body 是两个独立容器，都要处理
如果用了 initSort，排序触发重绘时也会清空自定义内容，done 同样适用
避免在 parseData 里操作 DOM，时机不对，容器还没生成

真正难的不是“怎么塞个图标”，而是确保它在分页、搜索、排序、固定列所有重绘场景下都稳稳出现。别省那几行 done 逻辑。