三元表达式必须写在一行,否则Layui laytpl会因换行符解析失败报错;多条件嵌套、引号统一、null/undefined显式判断、复杂逻辑用{{# if}}块、导出Excel需手动映射字段值。
三元表达式必须写在一行,换行直接报错
layui 的 laytpl 模板引擎会把换行符当作语句分隔,导致 {{ d.status === 1 ? '启用' : '禁用' }} 拆成多行后解析失败,控制台抛出 uncaught syntaxerror: unexpected token ';'。这不是语法写错,是引擎底层把换行替换成空格后破坏了 js 表达式结构。
必须严格保持单行紧凑格式:
{{ d.status === 1 ? '启用' : '禁用' }}多个条件嵌套也一样,不能换行:
{{ d.status === 0 ? '未开始' : d.status === 1 ? '进行中' : '已结束' }}- 别用回车、Tab 或空格断开三元结构
- 模板字符串里不支持注释,
//或/* */会导致解析中断 - 引号统一用单引号或双引号,避免混用(如
'正常': "禁用")
字段为 null/undefined 时,|| 不可靠,要用 == null
d.phone || '-' 看似简洁,但当 d.phone 是 0、''(空字符串)或 false 时也会返回 '-'——这些值在业务中可能是合法数据,不该被误判为空。
正确做法是显式判断是否为 null 或 undefined:
{{ d.phone == null ? '-' : d.phone }}-
== null同时匹配null和undefined,比=== null || d.phone === undefined更简短安全 - 不要用
!d.phone,它对0、''、false都为真 - 如果字段名不确定是否存在(比如后端可能不返回
email),仍需先确保d.email不报Cannot read property 'email' of undefined——此时应改用函数形式templet: function(d) { return d.email == null ? '-' : d.email; }
复杂逻辑别硬塞三元,该上 {{# if}} 块就上
三元只适合单层二选一。一旦要处理三种以上状态、需要调用方法、或要拼 HTML 标签,强行塞三元会让模板难以维护甚至崩溃。
比如给状态加不同颜色标签:
{{# if(d.status === 0) { }}<span class="layui-badge layui-bg-gray">未开始</span>{{# } else if(d.status === 1) { }}<span class="layui-badge layui-bg-green">进行中</span>{{# } else { }}<span class="layui-badge layui-bg-red">已结束</span>{{# } }}-
{{# if}}后必须带#,漏掉会整个模板失效 - 所有
{{# }}必须成对出现,{{# if(...) { }}对应{{# } }} - 里面可以写任意 JS 逻辑,包括调用
layui.util.toDateString(d.time),但注意字段名必须和后端返回完全一致(比如是create_time就不能写createTime)
导出 Excel 时三元表达式完全无效,别指望它影响导出内容
你表格里用 {{ d.status === 1 ? '启用' : '禁用' }} 渲染得再漂亮,导出的 Excel 里还是原始数字 1 或 0。因为 templet 只作用于 DOM 渲染,table.exportFile() 读的是 table.cache 里的原始数据。
要让导出内容也变成文字,必须手动映射:
const cacheData = layui.table.cache['myTable'] || [];
const exportData = cacheData.map(d => ({
...d,
status: d.status == 0 ? '禁用' : d.status == 1 ? '启用' : '未知'
}));
layui.table.exportFile('myTable', exportData);- 字段名大小写、拼写必须和
cols中定义的field完全一致,否则该列导出为空 - 后端返回的
status可能是字符串"1",建议统一转成字符串比较:String(d.status) === '1' - 如果表格有上百列,别一个个手写映射,抽成函数:
const toStatus = v => ({ '0': '禁用', '1': '启用' }[String(v)] || '未知')
真正容易被忽略的是:三元表达式看着像后端模板(如 Thymeleaf),但它运行在浏览器里,没有服务端兜底;一旦字段名写错、类型预估偏差、或忘记处理 null,轻则显示空白,重则整行模板崩溃。与其反复调试模板,不如把逻辑提前收束到函数里,再用 templet: function(d) { ... } 调用。


















