templet函数最直接:读取d.status用三元或if返回中文;嵌套字段需d.info?.status;多状态用映射对象避免if嵌套;带样式需拼HTML字符串;字段名不一致时优先在parseData扁平化。

templet 里直接判断状态值返回文字
状态字段是数字或字符串时,templet 函数最直接:读取 d.status,用三元或 if 返回对应中文。比如后端返回 status: 1 表示“启用”,0 表示“禁用”:
templet: function(d) {
return d.status === 1 ? '启用' : '禁用';
}
注意点:
-
d.status必须和后端实际字段名完全一致(大小写、下划线都不能错) - 如果字段是嵌套的,比如
{info: {status: 1}},d.status是undefined,得写d.info?.status - 别漏写
return,否则单元格空白
状态映射规则多时用对象字面量避免 if 嵌套
状态值超过 3 种(比如 0/1/2/3 对应“草稿/审核中/已通过/已驳回”),硬写 if-else 易出错且难维护。
推荐提前定义映射对象:
const statusText = {
0: '草稿',
1: '审核中',
2: '已通过',
3: '已驳回'
};
// 列配置中
templet: d => statusText[d.status] || '未知'
这样改状态文案只需动一个对象,不碰渲染逻辑。
- 务必加
|| '未知',防止后端返回非法值导致单元格为空 - 对象键名是字符串还是数字?看接口实际返回——
status: "1"和status: 1是不同的键,建议统一转成字符串查:statusText[String(d.status)]
文字带样式(如颜色、标签)也得靠 templet 拼 HTML
单纯换文字不够,业务常要求“启用”绿色、“禁用”红色,甚至加 <span class="layui-badge"> 标签。
templet 支持返回任意 HTML 字符串:
templet: function(d) {
const cls = d.status === 1 ? 'layui-bg-green' : 'layui-bg-gray';
return '<span class="layui-badge ' + cls + '">' + (d.status === 1 ? '启用' : '禁用') + '</span>';
}
关键细节:
- HTML 标签必须是字符串,不能直接写 DOM 元素
- class 名要写全,
layui-bg-green是 Layui 内置色值类,别简写成green - 引号注意嵌套:外层用单引号,内层属性用双引号,否则解析失败
字段名不一致或结构复杂时,先在 parseData 里扁平化
如果接口返回的是 {data: [{status_code: 0}]},而你列配置写了 field: 'status',d.status 就永远是 undefined。
两种解法选其一:
- 改
field为status_code,然后templet里用d.status_code - 在
parseData中把数据扁平化:data: res.data.map(item => ({...item, status: item.status_code}))
后者更可控——所有列都基于统一字段名工作,不用每个 templet 都处理嵌套逻辑。但要注意 parseData 里别做耗时操作,影响首屏渲染。
真正容易被忽略的是:状态字段名和后端约定不一致时,templet 函数里 console.log(d) 看到的可能是空对象,因为数据根本没进表格缓存——问题出在 parseData 没正确提取 data 数组,而不是 templet 写错了。


















