text.none仅在无分页且初始渲染时生效,开启分页后依赖后端count字段判断空状态;通用解法是在done回调中判断res.data.length===0并动态插入带colspan的自定义HTML。
text.none 配置为什么经常不生效
因为 text.none 只在「无分页(page: false)且初始渲染」时起作用;只要开了分页(哪怕 page: {}),layui 就会忽略它,转而依赖后端返回的 count 字段判断是否为空。
- 后端返回
{count: 0, data: []}→ 触发text.none - 后端返回
{count: 5, data: []}→ 渲染 5 行空行,text.none完全不出现 -
text: {none: 'xxx'}必须写在table.render()的顶层参数里,塞进cols或parseData里无效 -
text: 'xxx'(字符串写法)是错的,会导致静默失败甚至单元格内容变undefined
done 回调中统一接管空状态
这是覆盖所有场景(初始加载、分页切换、搜索过滤)的可靠方式,核心是判断 res.data.length === 0,而非只看 count === 0 —— 后者会漏掉前端 filter 后为空的情况。
- 定位目标容器:
$(this.elem).next('.layui-table-box').find('.layui-table-body table tbody') - 清空并插入 HTML:
$tbody.html('<tr><td colspan="' + this.cols.length + '" style="text-align:center;padding:40px;color:#999;">暂无匹配数据</td></tr>') -
colspan值必须等于实际列数,否则在列宽变化或移动端下会错位 - 若插入按钮等交互元素,事件需用事件委托绑定(因为
tbody是动态替换的)
单元格内空值显示“—”怎么改
表格整页“无数据”提示和单个单元格显示“—”是两回事:text.none 管不了后者,“—”是 layui 对 null/undefined/'' 的默认 fallback,不可通过配置关闭。
- 单列处理:用
templet,注意判空逻辑 ——d.field != null ? d.field : '-'比d.field || '-'更安全(避免把0当空) - 全局处理:在
parseData中预处理res.data,例如d.remark = d.remark ?? '-'; - 固定列(
fixed: 'left')加templet后容易列宽塌缩,建议显式设minWidth: 60
CSS 覆盖空提示文字样式
想调颜色、字号或间距,直接写 CSS 最轻量;但选择器必须足够具体,且加 !important,否则会被 layui 内联样式覆盖。
- 正确选择器:
.layui-table-view .layui-table-body .layui-none - 示例:
.layui-table-view .layui-table-body .layui-none { color: #666 !important; font-size: 14px !important; } - 别只写
.layui-none,它不是全局唯一,可能被弹窗、表单等其他模块干扰 - 这个样式 reload 不失效,因为 DOM 节点每次都是新生成的,CSS 规则始终生效
text.none 对搜索完全无效;而 done 回调里若只判 res.count === 0,就会漏掉前端 filter 导致的空结果。


















