Layui表格templet支持函数式模板,需在列配置中直接定义templet函数,接收参数d(含d.data为当前行数据),根据d.data.status等字段动态返回含layui-icon Unicode的HTML字符串,并配合CSS类控制颜色,严禁异步操作或写死内容。
layui table 的 cellTemplate 怎么用
直接在列配置里写 templet,别用 field + type: 'checkbox' 那套默认渲染逻辑。layui 2.8+ 支持函数式模板,能根据当前行数据动态决定图标内容。
常见错误是把图标写死成 HTML 字符串,结果所有行都一样;或者漏传 data 参数,导致取不到当前行字段。
- 必须返回字符串(不是 DOM 节点),且只含纯 HTML 片段,不能带
<script>或事件绑定 -
templet函数接收一个对象参数,其中data是当前行完整数据,item是当前单元格所在行数据(二者通常一致) - 图标建议用 Layui 自带的
这类 Unicode 实体,避免额外加载 iconfont 或 img 标签引发跨域或路径问题
怎么根据 data.status 渲染不同图标
假设后端返回的每行有 status 字段,值为 'success'、'warning'、'error',就按这个分支写判断逻辑。
别在模板里调用异步方法或发起请求——templet 是同步执行的,任何 await 或 $.ajax 都会失效或报错。
{
field: 'status',
title: '状态',
templet: function(d) {
var icon = '';
if (d.data.status === 'success') {
icon = ''; // 对勾
} else if (d.data.status === 'warning') {
icon = ''; // 叹号
} else if (d.data.status === 'error') {
icon = ''; // 叉号
}
return '<i class="layui-icon">' + icon + '</i>';
}
}
图标颜色和样式怎么跟着状态变
单纯换图标不够,还得配颜色。Layui 不支持在 templet 里直接加内联 style,但可以加 class,再用 CSS 控制。
容易踩的坑:给 <i> 加了 class 却忘了在页面顶部写对应 CSS,结果图标全黑或没反应。
- 在
templet中返回带 class 的标签,比如<i class="layui-icon status-success"></i> - 在页面
<head>或全局样式里补上:.status-success { color: #52c418; }、.status-warning { color: #faad14; }、.status-error { color: #f5222d; } - 不要用
!important强覆盖,Layui 的layui-icon默认色是继承父级 color,改父容器色更稳妥
为什么 reload 后图标不更新
表格重载(table.reload())时,如果传的参数里没包含新数据的 status 字段,或者字段名大小写不一致(比如后端返回 Status,你代码里写 d.data.status),图标就会回退成空或默认值。
调试时打开浏览器控制台,打印 console.log(d.data) 看实际字段名和值,比猜快得多。
- 确保接口返回字段名与
templet中访问的完全一致(包括大小写) - reload 时若用了
where参数,检查是否无意中过滤掉了status字段 - 如果用了
parseData回调,确认它没有把原始status覆盖或删掉


















