text.none仅在初始加载且禁用分页时生效,分页开启后依赖后端count字段判断空状态;通用解法是done回调中判断res.data.length===0并动态插入带colspan的自定义html。
直接配 text: {none: 'xxx'} 是最简方式,但只在「初始加载且无分页」时生效;多数场景下它会被忽略,必须配合 done 回调手动处理。
为什么 text.none 经常不显示
这个配置项有严格触发条件:它只在表格首次渲染、且未启用分页(page: false)时起作用。一旦你开了分页(哪怕只是 page: {}),Layui 就会依赖后端返回的 count 字段判断是否真为空——此时 text.none 完全被跳过。
- 后端接口必须返回
{code: 0, count: 0, data: []},缺count或值为null都会导致表格卡在 loading 状态 - 前端本地
data模式下,必须确保传的是真实空数组[],而不是null、undefined或带空对象的数组[{}] -
text配置必须写在table.render()的顶层对象里,放在cols或page里无效
用 done 回调动态替换空状态文字(推荐)
这是覆盖所有场景的通用解法:无论初始加载、分页切换、还是搜索过滤后为空,只要 res.data.length === 0,就能稳稳接管。
- 定位目标容器:
$(this.elem).next('.layui-table-box').find('.layui-table-body tbody') - 清空原有内容:
$tbody.html(''),避免残留旧行 - 插入自定义 HTML:
$tbody.html('<tr><td colspan="' + this.cols.length + '" style="text-align:center;padding:40px;color:#999;">暂无匹配数据,请重试</td></tr>') - 注意
colspan值要和实际列数一致,否则在移动端或列数变化时会错位
CSS 覆盖默认文字(仅限纯文本微调)
如果你只需要改字体、颜色或间距,不加图标、按钮等复杂结构,直接 CSS 更轻量。
- 默认文字由
.layui-table-empty容器承载,里面是div.layui-none - 加样式时必须带
!important,因为 Layui 会注入内联style干扰优先级 - 示例:
.layui-table-empty .layui-none { color: #666 !important; font-size: 14px !important; } - 别试图改
.layui-table td或tbody,空状态是独立 DOM 节点,不在表格数据流里
真正容易被忽略的是:搜索后空状态和初始空状态走的是两套逻辑,text.none 对搜索完全无效;而 done 回调里若没判 res.data.length,只判 count === 0,就会漏掉前端 filter 场景。











