必须用templet函数根据d.data.status分支返回不同图标HTML字符串，需判空、trim、类型统一，返回纯字符串且图标类名须正确加载字体资源。
templet函数里怎么根据data.status返回不同图标
必须用列配置的templet函数，不能写死html字符串。函数接收参数d，其中d.data是当前行完整数据，根据d.data.status等字段分支返回含这类unicode图标的html字符串。
常见错误是把图标写成固定字符串，比如templet: '<i class="layui-icon"></i>'，结果所有行都显示同一个图标；或者漏掉d.data，直接写d.status导致取值为undefined。
- 判断逻辑要覆盖空值：
if (!d.data || d.data.status == null)提前返回默认图标 - 字符串值建议统一
.trim()，避免前后空格导致匹配失败 - 别用
==混比数字和字符串，比如1 === '1'为false，建议转成同类型再比 - 返回值只能是纯HTML字符串，不能含
<script>、不能调用$.ajax或await——templet是同步执行的
示例：
templet: function(d) {
const status = d.data?.status?.trim();
if (status === 'success') return '<i class="layui-icon layui-icon-ok"></i>';
if (status === 'warning') return '<i class="layui-icon layui-icon-alert"></i>';
if (status === 'error') return '<i class="layui-icon layui-icon-close"></i>';
return '<i class="layui-icon layui-icon-help"></i>';
}
图标不显示？先查这三个地方
图标空白或显示方块，大概率不是代码逻辑问题，而是底层资源没加载成功。
打开浏览器开发者工具，切到Network面板，过滤icon或font，看是否有404请求。Layui的图标依赖layui.css中声明的@font-face，路径错一个字符就全挂。
-
layui.css里写的字体路径是url("../font/iconfont.eot")，但你项目结构变了（比如CSS在/css/，而字体在/static/font/），就会404 - 本地双击HTML打开时，浏览器用
file://协议，跨域限制导致字体拒绝加载——必须起本地服务，比如python -m http.server - 用了CDN引入Layui，但CDN节点缺失字体文件，或被防火墙拦截
临时验证方式：在控制台执行getComputedStyle(document.body).fontFamily，如果返回值不含"layui-icon"，说明字体根本没注册上。
想用颜色区分图标？别写内联style
直接拼style="color:#5FB878"看似快，但会破坏样式复用、带来XSS风险，且Layui重绘时反复拼接容易引号嵌套出错。
正确做法是给<i>加class，用CSS控制颜色：
.icon-success { color: #5FB878; }
.icon-warning { color: #F7B824; }
.icon-error { color: #FF5722; }
然后在templet里返回：
return '<i class="layui-icon icon-success"></i>';
- 所有颜色定义集中管理，后续改主题只需动CSS，不动JS
- 支持:hover、transition等伪类和动画效果
- 避免后端返回恶意字符串（如
status: 'success" onclick="alert(1)"'）注入到style里
状态字段名不是status怎么办
后端字段名千奇百怪：可能是state、result、code，甚至数字0/1/2或布尔true/false。templet里硬编码d.data.status必然报错。
先用console.log(d)确认真实结构，再适配：
- 数字码：用
String(d.data.code) === '1'或Number(d.data.code) === 1 - 布尔值：
d.data.is_valid === true，注意别写成== 'true' - 带前缀的字符串：
(d.data.type || '').includes('error') - 字段可能不存在：
d.data?.result?.toLowerCase()比d.data.result.toLowerCase()安全
更稳妥的方式是抽离映射表：
const statusMap = {
'active': 'ok',
'inactive': 'close',
'pending': 'loading',
1: 'ok',
0: 'close'
};
const iconCode = statusMap[d.data.state] || 'help';
这样字段名、值、图标三者解耦，换接口也不用改templet主体逻辑。
实际用起来最麻烦的不是写判断，而是字段名和值的不确定性——每次对接新接口，第一件事不是写代码，是打开Network面板看响应体里字段到底叫什么、长什么样。
