templet必须为函数才能支持逻辑判断、状态渲染和格式化,字符串模板仅支持字段映射;函数中需严格匹配后端字段名,工具函数应通过闭包或window注入;操作列返回HTML字符串,事件须委托绑定;treeTable需判isParent以区分父子节点。
templet必须是函数才能做逻辑判断
字符串模板(如'{{d.name}}')只能做字段映射,不支持if、三元运算或函数调用。只要涉及状态判断、按钮差异化、空值兜底、格式化等,就必须用函数形式:templet: function(d) { ... }。否则渲染结果为空或报undefined——这不是 bug,是 layui 的 laytpl 引擎根本不解析原生 js 语句。
函数里怎么安全访问数据和工具方法
函数参数d是当前行原始数据对象,但注意:字段名必须和后端返回的 key 完全一致(比如后端是sbj_start,写成d.createTime就会 fallback 到当前时间)。需要调用工具函数(如时间格式化)时:
- 别直接写
formatDate(d.time)——会报formatDate is not defined - 推荐用闭包传入:
templet: (function(fmt) { return function(d) { return fmt(d.time); }; })(myDateFormatFunc) - 或挂到
window下(仅限简单场景):window.formatDate = layui.util.toDateString;,再写templet: function(d) { return formatDate(d.sbj_start, 'yyyy-MM-dd'); }
操作列按钮要动态生成 HTML 字符串
templet 函数只负责“画出来”,返回的是纯 HTML 字符串,不是 DOM 节点。常见错误是试图在函数里写document.createElement或绑定事件——这既无效又破坏渲染流程。
- 正确做法:用
if/else拼字符串,例如return d.status === 1 ? '<button class="layui-btn layui-btn-xs">启用</button>' : '<button class="layui-btn layui-btn-xs layui-btn-disabled">已禁用</button>' - 按钮点击事件必须委托绑定,不能写
$('.del-btn').on('click', ...)——表格是异步渲染的,DOM 还没出来就去绑,必然失效 - 所有
class名需与 Layui 官方样式兼容,比如layui-btn-disabled比手动加disabled属性更可靠
treeTable 场景下必须判isParent
树形表格的数据结构比普通表格多出isParent、children等字段。如果模板里直接读d.name不加判断,父子节点会混在一起显示,图标错位、展开逻辑异常。
- 务必在函数开头加判断:
if (d.isParent !== undefined) { /* 处理树形逻辑 */ } - 父节点常需加粗、加图标或禁用操作:
return d.isParent ? '<strong>' + d.name + '</strong>' : d.name; - 子节点若含
children字段但未展开,d.children可能是undefined,访问前先if (d.children && d.children.length)


















