最简单可控的方式是在列配置的templet里写判断逻辑,它只影响屏幕渲染不影响导出;需用if或三元运算返回完整HTML字符串,推荐用map对象统一管理状态映射并设默认兜底。

直接在列配置的 templet 里写判断逻辑,是最简单、最可控的方式。别指望 templet 能影响导出——它只管屏幕渲染。
templet 函数内用 if/三元判断转文字
这是最常用也最不容易出错的做法。Layui 渲染每行时会把整行数据对象传给 templet,你只需读取对应字段、判断值、返回字符串即可。
- 状态字段是字符串
"0"或"1":用===比较,避免隐式转换出错 - 状态字段可能是数字
0或1:统一转成字符串再比,或用双等号==(但不推荐) - 必须返回完整 HTML 字符串,哪怕只是纯文本,否则单元格空白
- 示例写法:
{ field: 'status', title: '状态', templet: function(d) { return d.status == "1" ? "正常" : "禁用"; }}
用 map 对象统一管理映射关系
当字段多、文案常变、或要支持多语言时,硬编码判断会很快失控。提前定义一个映射对象,templet 里只做查表操作。
- 定义
const statusMap = {"0": "禁用", "1": "正常", default: "未知"}; -
templet中调用:return statusMap[d.status] ?? statusMap.default; - 后续加新状态(比如
"2": "维护中")或改文案,只动这个对象,不碰表格配置 - 注意:不能用
d.status in statusMap判断,因为undefined和null会导致查不到,??更安全
别踩这些坑
看似简单,但实际项目里高频翻车点就这几个:
-
templet里写了getColor(d.status),但函数没挂到全局或layui实例上 → 渲染失败,单元格空白 - 后端返回的是数字
0/1,你却用=== "0"去比 → 全部走 else 分支 - 忘了处理空值:
d.status是null或undefined时,直接取statusMap[d.status]得undefined,没 fallback → 单元格为空白 - 在
done回调里用 jQuery 找单元格再改文本(如$("[data-field='status']").text(...))→ 分页、搜索、重载后失效,且破坏了数据驱动逻辑
导出时也要同步转换?得另配
很多人以为 templet 会影响 Excel 导出,其实完全不会。导出走的是另一套逻辑,字段值直接取原始 d.status。
- 如果导出也要“0→禁用”,必须在
exportData或自定义导出函数里手动映射 - 推荐方式:复用上面定义的
statusMap,导出前对每行status字段做一次转换 - 更彻底的解法:后端返回时就带中文状态字段(如
status_text),前端templet和导出都直接读它,避免两端重复映射
真正容易被忽略的是:状态字段类型不一致(有时字符串、有时数字、有时 null)、导出与界面文案不同步、以及 map 对象没设默认兜底——这三个点一漏,线上就出现空白单元格或导出错乱。


















