templet函数中安全读取字段值需确保d.xxx的字段名与后端返回key完全一致(区分大小写、含下划线等),嵌套字段须用可选链如d.user?.name,空值需兜底;映射状态用对象字面量更清晰,返回合法html字符串,禁用dom操作和异步请求。

直接用 templet 函数,别在 done 回调里遍历 DOM 替换文本——那是反模式,会破坏排序、导出、选中等内置行为。
templet 里怎么安全读取字段值?
函数参数 d 就是当前行完整数据对象,但读 d.xxx 报 undefined 是最常见问题。根源几乎全是字段名不一致:
- 后端返回的是
status_code,你写成了d.status - 后端字段是小写
email,你配了大写field: 'Email' - 嵌套字段如
user.name,templet不自动解构,得手动写d.user?.name || '-' - 空值或
null时直接访问子属性会报错,务必加可选链或兜底
根据字段值返回不同文字或 HTML?
这是 templet 最常用场景,核心是「返回字符串」,不是拼 DOM 或调接口:
- 简单映射:用对象字面量比 if-else 更清晰,比如
const statusText = {0: '待处理', 1: '已完成', 2: '已取消'}; return statusText[d.status] || '未知'; - 带样式标签:直接返回合法 HTML 字符串,例如
return `<span class="layui-badge layui-bg-green">${d.status === 1 ? '通过' : '驳回'}</span>`; - 图片路径要绝对或带默认占位图,避免
src=""触发 404;别在templet里发请求,Layui 渲染是同步的
复选框(checkbox)怎么按字段控制是否勾选?
不能靠 JS 操作 DOM 去 setAttribute,必须用列配置的 LAY_CHECKED 属性,且它只接受布尔值或表达式字符串:
- 正确写法:
{ type: 'checkbox', LAY_CHECKED: d => d.ifCheck === true }(推荐函数形式,类型安全) - 如果非要用字符串表达式,必须确保字段值是布尔型,
LAY_CHECKED: 'ifCheck == true'—— 若后端传的是字符串"true",这行会失效 - 字段名大小写敏感,
ifcheck≠ifCheck;检查table.cache确认实际值类型
为什么 templet 有时根本不执行?
通常不是逻辑问题,而是列定义没对上:
-
field值和后端返回的 key 不匹配,导致整列无数据,templet自然不触发 - 列配置写在了
cols[1](二级表头),但templet只支持一级列(cols[0]) - 用了
fixed: 'right'却忘了把该列放在cols[0]末尾,Layui 会跳过渲染 - 字段值为
undefined且未设默认值,某些旧版 Layui 在 strict 模式下可能静默失败
最易被忽略的是:templet 函数内部不能依赖闭包外的异步状态,也不能修改 d 对象本身——表格后续操作(如排序、导出)都基于原始数据快照。











