layui表格templet中data即当前行原始数据,函数式需声明参数(如d),字符串模板用{{d.field}};字段名须与后端完全一致,嵌套对象支持d.user.name或{{d.user.name}};不可依赖layui.table.cache或this,避免undefined应先核对cols的field配置。

templet 里直接用 data 就是当前行原始数据
在 Layui 表格的 templet 函数或字符串模板中,Layui 会自动把当前行的完整 JSON 数据作为第一个参数传入。你不需要额外查 DOM、不靠 layui.table.cache、也不用拼 ID 去找——只要函数签名对了,data 就是它。
常见错误现象:
• 写成 function() { console.log(data); } 却报 data is not defined
• 在字符串模板里写 {{ data.id }} 没反应(其实是写法对但没注意字段名大小写)
• 以为要手动绑定事件再取数据,结果绕远路
- 函数式写法必须带参数:
templet: function(d) { return d.title + '(' + d.status + ')'; } - 字符串模板里统一用
{{d.字段名}},不是{{data.字段名}}—— Layui 固定传参变量名为d - 字段名区分大小写,后端返回
{"user_name":"张三"},就不能写{{d.userName}} - 如果字段是嵌套对象(如
user: {name: "李四"}),字符串模板里支持{{d.user.name}},函数里直接d.user.name
为什么不能在 templet 里用 layui.table.cache 或 this.config.id
有人试过在 templet 函数里去查 layui.table.cache['id'],或者试图从 this 取表格实例——这不可靠,且容易出错。
原因很简单:
• templet 是纯渲染函数,执行时不一定有完整的上下文环境
• layui.table.cache 是全局缓存,多表格时可能混用、异步加载后还没更新
• this 在箭头函数里是 window,普通函数里也未必指向表格实例
用于端到端视频本地化流程的轻量编排器,路由至四个专注子技能——/wjs-transcribing-audio、/wjs-translating-subtitles...
- templet 执行时机早于表格实例完全就绪,依赖
this或缓存属于“赌运气” - 原始数据已由 Layui 主动注入,没必要绕一圈再查——既慢又脆弱
- 唯一例外:你要跨行比对(比如当前行和上一行状态),才需要缓存,但那是另一层逻辑,不该塞进 templet
遇到 undefined 字段别急着改后端,先检查 cols 的 field 是否匹配
templet 里访问 d.xxx 是 undefined,90% 不是模板问题,而是列配置没对齐。
使用场景:
• 后端字段叫 create_time,但你在 cols 里写 field: 'createTime'
• 返回数据是数组,但 field 写成了对象路径(如 field: 'tags.0.name')——Layui 不支持这种解析
-
field必须和后端返回的 key 完全一致(包括下划线/驼峰/大小写) - 如果字段是数组,templet 里可以
d.tags && d.tags[0] && d.tags[0].name安全访问 - 字符串模板不支持三元或逻辑运算,
{{d.tags.length > 0 ? d.tags[0].name : ''}}会报错,得用函数式 templet - 开启
response: { data: 'list' }时,确保后端返回结构真包含该字段,别被包装层遮住
templet 函数里修改 d 不影响原始数据,但别改引用类型字段
你可以放心在 templet 函数里给 d 加临时字段(比如 d.statusText = d.status === 1 ? '启用' : '停用'),这不会污染原始 JSON。但要注意:
- 修改对象或数组字段(如
d.user.name = '王五')会影响其他地方——因为引用没变 - 如果后续要用
table.reloadData(),这些临时改动会消失,别把它当状态管理用 - 想加 UI 相关标记(比如图标 class、颜色 style),推荐用独立变量,而不是往
d上挂:const cls = d.status === 1 ? 'layui-badge-success' : 'layui-badge-gray';
复杂点在于:原始数据结构越深、字段命名越不规范,templet 里做判断就越容易漏 null;最容易被忽略的是后端返回空字符串 ""、字符串 "null"、或字段压根缺失这三种情况,它们都导致 d.xxx 访问时静默失败,建议统一用可选链或兜底处理。









