Layui如何实现数据表格在没有数据时显示自定义的图片-Layui教程-PHP中文网

应使用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;">
              @@##@@
              <p style="margin-top:12px;color:#999;">暂无数据</p>
            </div>
          `;
        }
      }, 0);
    }
  }
});

为什么不用 `text: { none: 'xxx' }`？

Layui 的 text.none 配置项只支持纯文本，不解析 HTML —— 即使你传入 <img src="/assets/empty.png" alt="暂无数据" style="max-width:90%"> 标签，也会被当作字符串原样显示，不会渲染成图片。这是最容易踩的坑：以为配置就能解决，结果页面上直接看到一串 HTML 源码。