templet函数是layui表格字段级渲染的推荐方式,通过返回字符串支持条件判断和html拼接,避免dom操作副作用;需确保field与后端字段名完全一致,嵌套数据需手动取值或扁平化。
直接在 templet 里写判断逻辑是最干净、最可控的方式,比用 done 回调遍历 dom 替换文本更可靠,也避免列宽错乱、排序失效等副作用。
用 templet 函数做字段值映射
这是 layui 表格推荐的字段级渲染方式,每个单元格内容由函数返回,天然支持条件判断和动态拼接。
- 把数字字段(如
status、type)的显示逻辑写进列配置的templet字段里,而不是等表格渲染完再用 jQuery 去找[data-field="status"]替换 - 函数参数
d就是当前行完整数据对象,可直接读d.status,不用依赖 DOM 文本内容,避免因空格、换行或格式化干扰判断 - 返回字符串即可,支持 HTML,比如加个 badge 样式:
return '<span class="layui-badge">' + (d.status === 1 ? '已通过' : '待审核') + '</span>' - 如果映射规则多(如 1→教务、2→机构、3→财务、4→业务),建议提前定义映射对象,避免 if-else 嵌套过深:
const typeMap = {1: '教务', 2: '机构', 3: '财务', 4: '业务'}; return typeMap[d.type] || '-'
templet 里访问不到数据?检查字段名是否匹配
常见错误是 templet 函数里读 d.xxx 为 undefined,本质是后端返回字段名和前端配置的 field 不一致。
- 确认接口返回的 JSON 中实际字段名(比如是
status_code还是status),field配置必须与之完全一致,包括大小写 - 如果后端返回的是嵌套结构(如
{user: {name: '张三'}}),field写user.name是无效的;需在parseData中扁平化,或在templet中手动取:d.user?.name - 调试时可在
templet开头加console.log(d),确认能拿到预期数据结构
需要复用映射逻辑?抽成独立函数或模板脚本
多个列都要做类似映射(如 putTop、canComment、status),重复写 templet 函数易出错且难维护。
- 方式一:定义全局映射函数,比如
window.mapStatus = v => ({0: '隐藏', 1: '展示'}[v] || '-'),然后在各列templet中调用:templet: d => mapStatus(d.status) - 方式二:用
<script type="text/html"></script>模板,配合templet: '#statusTpl'引用,适合带复杂 HTML 的场景,但注意模板内不能执行 JS 语句,只能用 {{}} 插值和简单 if/else - 不推荐在
done回调里统一遍历替换,因为分页切换、重载数据后要重复执行,且容易漏掉新插入的 DOM(比如开启height滚动时的虚拟滚动节点)
映射逻辑本身很简单,真正容易翻车的是字段名对不上、数据结构没理清、或者误以为 templet 能直接访问全局变量——它只接收 d 参数,所有依赖都得显式传入或提前声明。











