最轻量可控的方式是在列定义的templet中做空值判断;layui表格默认不将null/undefined渲染为“-”,需在templet中用三元表达式或rendernull函数显式处理,避免在parsedata中污染原始数据。
直接在列定义的 templet 里做空值判断,是最轻量、最可控的方式。layui 表格不会自动把 null 或 undefined 渲染成短横杠(-),它默认显示为空白单元格,甚至可能报错(比如对 null 调用 .tostring())。这不是后端该“补数据”的问题,而是前端展示层该兜底的环节。
列模板中用 ternary 判断 null/undefined
在 cols 配置里,对需要处理的字段加 templet,用三元表达式或逻辑运算符显式返回 -:
cols: [[
{field: 'name', title: '姓名', templet: function(d) {
return d.name == null ? '-' : d.name;
}},
{field: 'phone', title: '电话', templet: function(d) {
return d.phone || '-';
}}
]]
注意:d.phone || '-' 在 phone 是空字符串 '' 或 0 时也会变成 -,如果需保留这些“falsy but valid”值,必须用严格等价判断:d.phone == null(兼容 null 和 undefined)。
全局统一处理:封装一个 renderNull 函数
多个列都要处理时,重复写判断很冗余。可以提前定义一个工具函数,在各 templet 中复用:
function renderNull(val) {
return val == null ? '-' : val;
}
// 使用
{field: 'email', title: '邮箱', templet: function(d) {
return renderNull(d.email);
}}
这个函数可放在 table.render() 外部,甚至抽到公共 utils 模块里。它不依赖 layui 内部逻辑,纯 JS,稳定且易测。
别在 parseData 里“预填”短横杠
parseData 的职责是结构转换(比如把 res.list 映射为 data 数组),不是数据清洗。在这里把 null 改成 '-' 会污染原始数据,导致后续导出 Excel、API 调用或编辑回传时出错——后端很可能拒绝接收字符串 '-' 作为字段值。
- ❌ 错误做法:在
parseData里遍历res.data并把所有null替换为'-' - ✅ 正确边界:只做结构映射,保留原始值语义;展示层负责格式化
用 CSS 隐藏空单元格?不行
有人试图用 :empty 伪类或 content: '-' 来“兜底”,但 layui 单元格即使值为 null,DOM 里仍是 <td></td> 或 <td> </td>(含空格),不满足 :empty 条件;而 content 对 td 无效。这条路走不通,硬塞 CSS 只会增加维护成本和不确定性。
真正关键的是分清责任:数据结构归 parseData,原始值完整性归接口或业务逻辑,而“null 显示为 -”属于纯视图规则,必须落在 templet 这一层。漏掉这一环,表格看起来就总像缺了点什么。










