templet字符串模板不支持函数调用,因Layui将其编译为仅接收d参数的函数且无外部作用域;必须改用函数形式templet: function(d) { return formatDate(d.time); },方可访问外部定义的formatDate等工具函数。
templet里直接写formatDate(d.time)为什么会报错
因为layui把templet字符串动态编译成函数,只传入d一个参数,不带任何外部作用域。你写的formatdate根本不在它的执行上下文中,浏览器会抛referenceerror: formatdate is not defined。
常见错误包括:
- 在
templet字符串里写{{formatDate(d.time)}}(Layui模板语法不支持函数调用) - 在
templet函数体里直接调用未声明/未暴露的局部函数 - 误以为
this或layui对象能访问到页面定义的工具函数
必须挂到window上才能用?不一定
挂window.formatDate = function(){...}确实能用,但污染全局、难维护、不利于模块化。更推荐两种干净方式:
- 闭包捕获:把函数作为外层变量传进去,
templet: (function(fmt){ return function(d){ return fmt(d.time); }; })(myDateFormatFunc) - 函数体形式 + 外层作用域访问:只要
templet是函数(不是字符串),它天然能读取定义它的上下文里的const/let变量
例如:
const formatDate = (t) => t ? layui.util.toDateString(t, 'yyyy-MM-dd') : '-';
table.render({
cols: [[
{ field: 'create_time', templet: function(d) { return formatDate(d.create_time); } }
]]
});
templet函数里能拿到的参数不止d
从Layui 2.6.0起,templet函数支持第二个参数obj,包含列元信息,比如obj.index(行号)、obj.field(当前字段名)、obj.title(列标题)。这能帮你避免硬编码字段名,也方便做序号列、状态列联动等逻辑。
立即学习“Java免费学习笔记(深入)”;
注意:obj.data和d是同一个对象,别重复解构;obj里没有layui实例或表格配置,别指望它能访问table.config。
字符串模板templet: '{{d.name}}'能不能调函数
不能。字符串模板只支持{{d.xxx}}这种字段插值,不解析JS表达式,也不支持函数调用、三元运算、if判断。想格式化时间、拼接HTML、加条件逻辑,必须切到函数形式。
容易忽略的一点:字符串模板里写{{layui.util.toDateString(d.time)}}看似合理,实际会报错或渲染为空——Layui不会执行其中的JS,只会当普通文本处理。只有templet设为函数时,才真正进入JS执行环境。


















