Layui table 的 templet 不支持直接写 if/else 语句，必须用函数返回 HTML 字符串；需严格匹配字段名、注意嵌套属性判空、避免副作用操作，推荐三元运算符处理简单逻辑。
layui table 的 templet 里不能直接写 if/else
因为 templet 接收的是字符串或函数，不是 js 模板引擎语法；你写 if (d.status === 1) { ... } 会直接报错或渲染为空——layui 不解析 js 语句块，只执行返回字符串的函数。
正确做法是把逻辑写在函数体里，用 return 拼出最终 HTML 字符串：
templet: function(d) {
if (d.status === 1) {
return '<span class="layui-badge layui-bg-green">启用</span>';
} else if (d.status === 0) {
return '<span class="layui-badge layui-bg-gray">禁用</span>';
}
return '<span class="layui-badge">未知</span>';
}
templet 函数中访问数据字段要小心 d 的结构
d 是当前行的原始数据对象，但字段名必须和 cols 中定义的 field 完全一致，且区分大小写；如果后端返回的是 user_name，但你写了 d.userName，就会 undefined。
- 检查接口返回的实际字段名（推荐用浏览器 Network 面板看响应）
- 字段含下划线、驼峰、空格时，
templet里必须严格匹配 - 嵌套字段如
d.user.info.name要先判空，否则容易报Cannot read property 'info' of undefined
安全写法示例：
templet: function(d) {
return d.user && d.user.info ? d.user.info.name : '-';
}
用三元运算符替代 if/else 更简洁，但别嵌套太深
单层判断用三元最清晰，比如状态徽章、开关按钮这类二值场景：
templet: function(d) {
return d.status === 1
? '<button class="layui-btn layui-btn-xs">已启用</button>'
: '<button class="layui-btn layui-btn-danger layui-btn-xs">已禁用</button>';
}
但超过两层就容易难读，比如：
// ❌ 别这么写 return d.type === 1 ? 'A' : d.type === 2 ? 'B' : d.type === 3 ? 'C' : 'D';
- 三层以上分支建议退回
if/else if/else - 逻辑复杂时可提前提取成独立函数，避免
templet冗长 - 注意引号嵌套：HTML 用双引号，JS 字符串用单引号，避免转义
性能和兼容性：templet 函数会被每行调用一次
表格渲染 100 行，templet 就执行 100 次；如果里面做 DOM 查询、Ajax、复杂计算，会明显卡顿。
- 禁止在
templet里调用$.ajax或document.querySelector - 所有数据应提前在
data或done回调中准备好，templet只负责“展示” - Layui 2.8+ 支持
templet: '#tpl-id'引用 script 模板，适合多行 HTML，但依然要确保模板内不执行副作用逻辑
最容易被忽略的一点：Layui 的 templet 函数没有自动绑定 this，不要在里面用 this.xxx 访问 Vue/React 实例或外部变量，一律通过闭包或参数传入。
