必须将函数挂载到 window 对象上,如 window.formatTime = function(t) { ... },且 templet 必须使用 function(d) { return window.formatTime(d.createTime); } 形式,参数名只能为 d,不支持箭头函数、解构、模板字符串或管道符语法。
templet 里直接写函数名会报 ReferenceError
很多人在 templet 字段里写成 templet: 'formattime(createtime)' 或 templet: function(d) { return formattime(d.createtime); },结果控制台报 referenceerror: formattime is not defined。这不是函数没写,而是 layui 的 templet 执行上下文不包含你定义的全局函数——它运行在沙箱环境里,只认 window 下挂载的、且命名不冲突的函数。
常见错误现象:页面空白、字段显示 undefined、控制台反复报未定义错误;使用场景多见于时间格式化、状态码转中文、URL 拼接等需要复用逻辑的地方。
- 必须把函数挂到
window上,比如window.formatTime = function(t) { ... }; - 函数名不能是
date、util、lay这类 Layui 内部已占用的名字,否则会被覆盖或忽略 - 如果用了模块化(如 ES6 import),需额外暴露到全局,不能只靠
export
templet 使用函数时参数只能是 d,不能解构或重命名
Layui 表格的 templet 函数签名是固定的:function(d) { ... },其中 d 是当前行的完整数据对象。你不能写成 function({ createTime }) 或 templet: (row) => formatTime(row.createTime),Layui 不识别这种写法,会直接跳过执行或报 TypeError。
性能影响不大,但兼容性差:Layui 2.8.x 及更早版本对箭头函数支持不稳定,部分 IE/Edge 场景下 templet 会失效。
- 老写法必须用
function(d) { return window.formatTime(d.createTime); } - 新写法可接受
templet: function(d) { return window.formatTime(d.createTime); },但不能省略d参数名 - 如果要处理空值,得在函数内部判断,比如
d.createTime || '',不能指望 Layui 自动 fallback
模板字符串写法(templet: '<div>{{ d.createTime | formatTime }}</div>')不生效
有人看到 Vue 或其他框架的过滤器语法,尝试在 Layui 里写 {{ d.createTime | formatTime }},结果原样输出字符串,没调用函数。Layui 的 templet 字符串模式 **不支持管道符语法**,也不解析双大括号,它只是纯文本插入,不会做任何表达式求值。
这属于典型“想当然迁移经验”导致的坑,尤其从 Vue 转过来的同学容易踩。
- 字符串模式仅用于静态 HTML,比如
templet: '<span class="layui-badge">已发布</span>' - 只要涉及变量计算、函数调用,必须用函数形式:
templet: function(d) { ... } - 别试图在字符串里拼 JS 表达式,
'<div>' + formatTime(d.createTime) + '</div>'这种写法在字符串模式下d是未定义的
window.formatTime 在 table.render() 执行前已定义,且不能放在 layui.use 回调内部(除非你明确把它提升到外层作用域)。否则表格渲染时函数还没就位,就又回到 ReferenceError。


















