Layui表格中status字段需用templet函数前端转换为“启用”“禁用”等中文,不可修改原始数据;导出时需手动映射状态值,注意后端返回类型(number/string/boolean)并做兼容处理。
直接在 cols 配置里用 templet 函数处理,别碰后端返回的原始数字。layui 不支持字段级枚举映射,必须前端转。
常见错误是试图在 data 渲染前遍历修改原始数组——这会破坏响应式更新,且分页重载时失效。
templet: function(d) { return d.status === 0 ? '禁用' : '启用'; }
2 表示“审核中”),必须显式判断,else 分支不能只写 '启用',否则 undefined 也会被当启用d.status 是原始值,类型可能是字符串(后端吐了字符串 "0"),建议统一用 Number(d.status) === 0 或 d.status == 0(宽松比较更稳妥)状态逻辑复杂或复用时,别把判断逻辑塞进 templet 匿名函数里。抽成独立函数,可读性和维护性高得多。
典型场景:同一页面多个表格都要渲染状态,或状态文案要走 i18n。
const statusText = (v) => ({ '0': '禁用', '1': '启用', '2': '审核中' }[v] || '未知');
templet: d => statusText(d.status)
templet: function(d) { return statusText(d.status); }——没差别,但箭头函数更轻量d.status 是数字时也要自动转字符串(对象属性访问会隐式转换),但显式写 String(d.status) 更安心Layui 表格不认布尔值,templet 里直接用 d.status 会得到 true/false,不是 0/1。
别改后端接口,前端兼容即可。重点是别用 == 1 这类判断,布尔值走不通。
templet: d => d.status ? '启用' : '禁用'
null 或 undefined,加兜底:templet: d => d.status === true ? '启用' : d.status === false ? '禁用' : '未知'
d.status == 1——true == 1 是 true,但 false == 0 也是 true,容易误判导出功能(table.exportFile())默认导出原始数据,templet 不生效。想导出中文,得干预数据源。
本质是导出前替换字段值,不是渲染问题。
table.exportFile('user', table.cache['user'].map(d => ({...d, status: statusText(d.status)})), 'csv');
table.cache['xxx'] 只有当前页数据;要导出全部,需提前调用 table.reloadData(..., { done: ... }) 拉全量再导出exportFile 第二个参数是纯数据数组,不走任何模板或格式化,所有转换必须手动做