layui table数据格式化 layui表格templet使用指南

简单格式化用模板字符串{{d.field}}，需逻辑处理（如判断、HTML拼接、工具函数调用）必须用templet函数；模板字符串轻量但不支持复杂JS表达式，函数形式灵活但有微性能开销。

templet 用函数还是模板字符串？看场景选

直接结论：简单格式化用 {{d.field}} 模板字符串，要加逻辑（比如判断状态、拼接 html、调用工具函数）必须用函数形式 templet: function(d) { ... }。

模板字符串写法轻量，Layui 内部会自动解析，但不支持 if/else、三元运算外的 JS 表达式；函数形式完全自由，可调 layui.util.toDateString、可访问 d 外的全局变量、可做空值兜底——但每次渲染都执行一次函数，大量行时有微小性能开销。

• 时间列、状态标签、带 icon 的操作按钮 → 用函数
• 只是把 d.name 换成加粗或加个 span 包裹 → 模板字符串够用
• 想复用同一段格式化逻辑到多列？函数更易抽离，模板字符串得复制 ID 或重复写

日期格式化别踩 d.created 字段名不匹配的坑

最常见错误：写了 {{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}，结果显示的是当前时间——不是 bug，是字段名对不上。

Layui 的 toDateString 第一个参数必须严格等于你表格列定义的 field 值。后端返回 JSON 是 {"sbj_start": 1712345678000}，那你就得写 d.sbj_start，写成 d.createTime 就会 fallback 到当前时间。

• 检查浏览器 Network → Response 数据，确认字段原始名
• 模板字符串里不能换行，templet: "{{layui.util.toDateString(d.sbj_start, 'yyyy-MM-dd HH:mm:ss')}}" 必须是一整行
• 如果字段可能是 null/undefined，函数形式更安全：templet: function(d) { return d.sbj_start ? layui.util.toDateString(d.sbj_start, 'yyyy-MM-dd') : '-'; }

templet 函数里能拿到的不只是 d

从 Layui 2.6.0 开始，templet 函数第二个参数 obj 提供了列上下文信息，比只靠 d 灵活得多。

比如你想给每行“序号”列动态加背景色，或者在操作列里根据当前行状态决定显示“启用”还是“禁用”按钮，obj 能帮你省掉硬编码字段名。

• obj.field：当前列的 field 值（比如 "status"）
• obj.index：当前行索引（从 0 开始），适合做序号列：`第${obj.index + 1}行`
• obj.title：列标题，可用于生成 tooltip 或日志调试
• 注意：obj.data 和 d 是同一个对象，别重复解构

树形表格（treeTable）里 templet 要防 isParent 漏判

普通表格的 templet 直接读 d.xxx 就行，但 treeTable 数据里多了 isParent、children 这些属性，模板里不判断就容易父子节点混排、图标错位、点击展开失效。

典型表现：子节点也显示了“▶”折叠图标，或者父节点名字没加粗。根本原因是模板没区分层级语义。

• 必须用 {{# if(d.isParent){ }}...{{# } else { }}...{{# } }} 做条件渲染
• 不要在模板里直接访问 d.children.length，优先用 d.isParent ——这是 treeTable 内部计算好的可靠标识
• 异步加载子节点时，确保后端返回数据里每个节点都带 isParent: true/false，否则前端模板无法识别层级

实际项目里最容易被忽略的，是 templet 函数中对空值和异常时间戳的防御性处理——它不会报错，但会静默展示错乱时间或空白单元格，排查时得倒着从 Network 数据查起。