空表格提示语必须配置在table.render()顶层参数的text对象中,如text: {none: '暂无数据'},仅对res.data.length === 0生效;单元格空值显示“—”为硬编码行为,需用templet或parsedata干预;emptytext非法,自定义空状态须用done回调操作.layui-table-empty容器并配合css。

text: {none: 'xxx'} 必须写在 table.render() 顶层参数里
空表格提示语只能通过 text 配置项控制,但它只接受对象,不接受字符串。写成 text: '暂无数据' 会静默失败——表格可能空白、列内容变 undefined,甚至触发渲染异常。
正确用法是把它放在 table.render() 的最外层参数中,和 elem、cols 并列:
table.render({
elem: '#demo',
cols: [[{field: 'name', title: '姓名'}]],
text: {none: '暂无符合条件的数据'}, // ✅ 正确位置、正确类型
// ...
});
- 这个配置只影响整张表完全为空(
res.data.length === 0)时的提示,和单元格内空值(显示“—”)无关 - 不要塞进
parseData、response或某列的templet里,那些地方读不到 - 如果用了
page: true,提示语是否显示还取决于后端返回的count字段:若count === 0才触发,光有空data不够
单元格空值显示“—”不能靠 text 配置改
表格某列字段为 null、undefined 或 '' 时,Layui 默认渲染成“—”,这是硬编码 fallback 行为,text 完全不参与。
想统一改成“/”或“-”,必须显式干预:
- 用
templet每列单独处理:templet: d => d.fieldName != null ? d.fieldName : '-'(注意别用||,否则数字0会被误判) - 更推荐在
parseData里预处理数据:res.data.forEach(d => { d.status = d.status ?? '-'; }),避免模板重复 - 固定列(
fixed: 'left')加templet后,记得同步检查width和行高,否则容易错位
想加 HTML 按钮?别碰 emptyText,去 done 回调里操作
emptyText 是个误导性字段——它根本不是 Layui 表格的合法配置项,文档里没提,写了也无效。有人误以为能塞 <button>刷新</button>,结果只显示纯文本,所有标签都被转义。
真正可行的入口只有 done 回调:
- 在
done(res, curr, count)中判断count === 0,然后用document.querySelector('.layui-table-empty')找到空状态容器 - 直接替换
innerHTML,支持图片、链接、按钮等任意结构,但记得清除原有内联样式(如padding: 40px 0) - 如果启用了
height(固定表头),Layui 会生成多个tbody,但.layui-table-empty只有一个,无需额外处理
自定义图标和样式得用 .layui-table-empty 类
Layui 把空状态区域包裹在 .layui-table-empty 容器里,这是你唯一该动的 CSS 锚点。别试图覆盖 td 或 tbody,那没用。
常见操作:
- 换整块背景(含图标+文字):
.layui-table-empty { background-image: url(/imgs/no-data.svg) !important; } - 只换图标、保留文字:
.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; font-size: 14px !important; }
注意:Layui 的原始样式是内联注入的,所以你的自定义规则基本都要加 !important,或者确保 CSS 文件加载在 layui.css 之后。











