Layui表格中templet返回HTML需用<xmp>包裹防止转义,否则<button>等标签被显示为纯文本;换行符\n须转<br>且仍需<xmp>包裹;字段名含中文或点号会导致exportFile报错,field必须为合法JS标识符。
templet 里直接拼 HTML 会触发转义,必须用 xmp 包裹原始内容
layui 表格默认对单元格内容做 html 转义,templet 返回的字符串如果含 <、>、& 等,会被显示为源码而非渲染成元素。比如返回 "<button>编辑</button>",页面就真显示那串字符。
解决办法是用 <xmp></xmp> 标签包裹原始 HTML 字符串,它能强制浏览器原样输出不解析、不转义:
templet: function(d) {
return '<xmp><button class="layui-btn layui-btn-xs">' + d.status + '</button></xmp>';
}
-
<xmp>是 HTML4 保留标签,现代浏览器仍支持,Layui 渲染时不会干扰它 - 不要用
<pre>或<code>,它们只控制样式,不阻止转义 - 若需绑定点击事件,仍得靠
table.on('tool'),不能在<xmp>里写onclick
字段值含换行符 \n 或制表符 \t 时,表格自动截断或错位
Layui 单元格默认不识别换行,\n 会变成空格,\t 可能被忽略或撑开列宽。尤其导出 CSV 时,\n 还会导致整行错乱。
显示层面可手动转成 <br>,但要注意 templet 内容仍需 <xmp> 包裹才能生效:
templet: function(d) {
var content = d.remark || '';
content = content.replace(/\n/g, '<br>');
return '<xmp>' + content + '</xmp>';
}
- 纯文本展示(如日志、SQL 片段)建议用
white-space: pre-wrap配合 CSS,避免 JS 拼接 - 导出 CSV 前必须预处理:含
\n、\t、,、"的字段要加双引号并转义内部"为"" - 表格列宽受限时,
\t容易引发列宽崩坏,建议提前替换成空格或短横
字段名含中文/空格/点号导致 exportFile 报 Cannot read property 'xxx' of undefined
错误信息 Cannot read property '用户姓名' of undefined 不是因为 Layui 不支持中文,而是它用 row.用户姓名 方式取值——JS 语法不允许点号后跟中文或空格。
根本解法是让 field 值严格符合 JS 标识符规则:
-
field必须是纯英文、数字、下划线组合,如user_name、order_id,不能是"用户姓名"或"order id" -
title可自由设中文,它只控制表头文字,不影响数据读取 - 后端字段名不可改?在
parseData回调里把原始数据映射成合法 key:{ "用户姓名": "张三" }→{ user_name: "张三" } - 嵌套字段如
data.info.name必须扁平化,exportFile不解析路径表达式
导出 CSV 后 Excel 显示中文乱码或公式误触发
不是 Layui 的问题,是 Windows Excel 默认用 ANSI 编码打开 CSV,且对列头敏感。常见现象包括中文变问号、以 = 开头的字段被当公式执行、含 \t 的 title 导致列错位。
两个硬性操作缺一不可:
- CSV 字符串开头必须加
\uFEFF(UTF-8 BOM),否则 Excel 不认这是 UTF-8:'\uFEFF' + csvContent -
title字符串开头若为=、+、-、@,必须前置单引号:title.replace(/^([=+\-@])/g, "'$1") - 禁止在
title中使用\n、\r、\t,Excel 解析器会直接崩溃 - WPS 用户可能仍乱码,建议导出 Excel(.xlsx)格式,需额外引入
layui.excel模块
最易被忽略的是 BOM —— 少了它,哪怕内容全对,Windows Excel 打开就是一堆方块。别信“保存为 UTF-8”这种手动操作,必须代码级注入 \uFEFF。


















