text 配置项必须是对象而非字符串,正确写法为 text: {none: '暂无数据'};单元格空值默认显示“—”不可配置,需用 templet 或 parseData 统一处理。
table.render 的 text 配置项必须是对象,不是字符串
“—” 是 layui 表格默认的空单元格占位符,但很多人误以为它是可配置的显示文字,其实它和 text 无关;真正控制“无数据时整张表提示语”的才是 text,而它只接受对象,写成字符串就会失效,甚至导致后续渲染异常或空白。
-
text: {none: '暂无数据'}✅ 正确写法,表格完全为空时显示该提示 -
text: '暂无数据'❌ 错误写法,会静默失败,部分版本还会让单元格内容变成undefined或— - 这个配置必须放在
table.render()的顶层参数里,不能塞进parseData或response
单元格内空值显示为“—”,本质是 layui 的默认 fallback 行为
当某行某列的数据字段为 null、undefined 或空字符串('')时,layui 不会报错,而是自动渲染成“—”。这不是 bug,是设计如此——但它不可配,也不走 templet,除非你显式干预。
- 想把所有空字段统一显示为“/”或“-”,必须用
templet拦截每列渲染 - 哪怕只是改一个字段,也要写完整判断:
templet: d => d.fieldName || '-' - 注意:如果字段是数字 0,
d.fieldName || '-'会误判为“空”,应改用d.fieldName != null ? d.fieldName : '-'
全局统一处理空字段,推荐在 parseData 中预处理数据
比起每个列都写 templet,更干净的做法是在后端返回后、表格渲染前,把所有空值标准化。这样既减少模板冗余,也避免前端逻辑散落。
- 在
table.render()的parseData回调里遍历res.data,对目标字段做空值归一化 - 例如:
res.data.forEach(d => { d.status = d.status ?? '—'; d.remark = d.remark ?? ''; }); - 注意不要修改原始
res对象结构(比如删掉字段),否则可能影响count或分页逻辑 - 该方式不影响服务端数据,纯前端视图层处理,适合中后台管理类场景
固定列 + 空字段 + 自定义 templet 容易错位
给固定列(fixed: 'left')加 templet 处理空值时,如果没同步更新对应列的 width 或内容高度,容易出现列宽塌缩、文字换行错乱,尤其在 IE 或低版本 Chrome 下更明显。
- 固定列的 DOM 是独立副本,
templet渲染后若内容变短(如 “—” → “/”),其宽度可能被重算,导致与主体列不对齐 - 稳妥做法:给该列显式设
minWidth(如minWidth: 60),并确保templet返回的 HTML 结构简洁、无多余空格或换行 - 验证方式:用浏览器 DevTools 检查
.layui-table-fixed-l table tr td的实际渲染结果,对比主体表格对应列
text)、单元格空值(默认“—”)、以及你主动写的 templet 或 parseData。它们互不覆盖,也互不感知——这点最容易被忽略,结果就是改了 A 地方,B 地方还是“—”。


















