Layui表格怎么实现根据数值范围在单元格显示不同图标-Layui教程-PHP中文网

templet函数需手动判断数值并返回带layui-icon类的HTML：score

layui table 的 `templet` 怎么写才能按数值显示图标

直接在列配置里用 templet 返回带图标的 html 字符串，别碰 skin 或全局样式钩子。layui 表格不支持单元格级条件样式自动绑定，必须手动判断值、拼 html。

值小于 60 显示
60 ≤ 值
值 ≥ 90 显示
templet 函数参数是 d（当前行数据对象），不是索引或原始 JSON 字符串

为什么不能用 `style` 或 `cellStyle` 实现图标切换

Layui 的 cellStyle 只控制 CSS 样式（如背景色、文字色），没法动态插入 DOM 节点或替换内容。图标本质是额外的元素，必须由 templet 输出完整 HTML 片段。

误用 cellStyle: () => ({ 'color': d.score > 90 ? 'red' : 'gray' }) → 只能改文字颜色，图标出不来
试图在 done 回调里用 jQuery 找 .layui-table-cell 再塞图标 → 表格重绘、分页、排序后失效
所有图标类名必须带 layui-icon 前缀，否则图标字体不生效

`templet` 里取值要注意什么

确保字段名和数据结构对得上：如果接口返回的是 { "percentage": 85 }，就别写 d.score；Layui 不做字段映射，原样取值。

字段为空或 undefined 时，parseInt(d.xxx) 会得 NaN，需先判空：const val = d.percentage == null ? 0 : parseInt(d.percentage)
后端可能传字符串数字（如 "85"），直接比较会隐式转换，但建议显式 parseInt 或 Number()
不要在 templet 里调接口或写复杂逻辑，它会在每次渲染（含滚动、排序）时执行，影响性能

templet: function(d){
  const score = d.score == null ? 0 : Number(d.score);
  if (score  ' + score;
  if (score  ' + score;
  return '<i class="layui-icon layui-icon-rate-solid"></i> ' + score;
}