layui.table 默认不渲染 HTML 是为防止 XSS 攻击,通过 laytpl 转义确保安全;需用 templet 函数返回原始 HTML,且必须确保内容可信。
默认情况下,layui.table 会自动对单元格内容做 html 转义(即把 <strong> 渲染成纯文本),所以直接返回带标签的字符串不会生效——这是设计使然,不是 bug。
为什么 layui.table 默认不渲染 HTML?
出于 XSS 安全考虑,Layui 在单元格内容输出前统一调用了 layui.laytpl 的转义逻辑(类似 {{d.xxx}})。即使你传入 <span class="red">警告</span>,也会被当成普通字符串显示。
用 templet 函数手动返回未转义 HTML
唯一可靠的方式是为对应列配置 templet 函数,并在函数里直接拼接或返回 HTML 字符串。Layui 会将该函数的返回值作为原始 HTML 插入 DOM。
- 必须返回字符串(不能 return undefined 或空对象)
- 避免在模板函数中直接拼接用户输入,否则可能引入 XSS
- 如果字段值本身含双引号或换行,建议先用
layui.util.escape()对非信任内容做局部转义
示例:
{
field: 'status',
title: '状态',
templet: function(d) {
if (d.status === 1) {
return '<span class="layui-badge layui-bg-green">启用</span>';
}
return '<span class="layui-badge layui-bg-gray">禁用</span>';
}
}
别误用 templet: '#xxx' 模板 ID
如果用 templet: '#statusTpl' 引用 script 模板,默认仍会走 laytpl 转义流程,除非你在模板里显式写 {{= d.statusHtml }}(注意是 {{= }},不是 {{ }})。
立即学习“前端免费学习笔记(深入)”;
-
{{ d.xxx }}→ 自动转义 -
{{= d.xxx }}→ 原样输出(需确保d.xxx是可信 HTML) - script 模板里不能写 JS 逻辑,只支持 laytpl 语法
表格重载后 HTML 消失?检查是否漏了 render
动态修改数据后调用 table.reload('id'),若列配置没随 data 一起更新(比如 templet 函数被覆盖或未保留),HTML 渲染就会失效。
- templet 必须在初始
table.render()或每次reload()时完整传入 - 不要在 reload 时只传部分参数(如只传
where或page),templet 会被丢弃 - 推荐把 column 配置抽成变量复用,避免遗漏
真正要注意的是:HTML 渲染权完全交给开发者,Layui 不再兜底安全。哪怕只是加个 <em>,也要确认数据来源是否可控——这点比“怎么显示”更关键。



















