layui表格需用templet渲染圆点指示灯，通过内联样式控制宽高相等、border-radius:50%及vertical-align:middle确保正圆；颜色逻辑应抽离为独立函数并处理边界值与状态映射兜底。
用 templet 渲染自定义单元格内容
Layui 表格不支持直接在单元格里画圆点，必须靠 templet 手动拼 HTML。它本质是把原始数据传进去，由你返回任意字符串——所以圆形指示灯得自己写 <span></span> + CSS 样式。
- 别在
field里直接塞 HTML 字符串，Layui 默认会转义，显示为纯文本 -
templet函数参数是data对象，比如库存字段叫stock，就用data.stock判断数值 - 推荐用内联样式控制大小和圆角，避免全局 CSS 冲突；
display: inline-block是关键，不然width/height不生效
templet: function(data) {
let color = data.stock > 0 ? '#5FB878' : '#FF5722';
return '<span style="display:inline-block;width:12px;height:12px;border-radius:50%;background:' + color + '"></span>';
}
库存状态颜色逻辑写在哪？别硬编码进 templet
把颜色判断逻辑塞进 templet 函数里看着省事，但一改全改、复用困难。实际项目里库存状态往往不止“有/无”，还可能有“临界”“缺货中”“已售罄”等语义。
- 建议抽成独立函数，比如
getStockStatusColor(val)，输入数字，返回颜色值 - 如果后端返回的是状态码（如
status: 1），别在前端用if (data.status === 1)硬匹配，优先查映射表：{1: '#5FB878', 2: '#FF5722', 3: '#FFB800'} - 注意
null、undefined、空字符串这些边界值，没处理会导致NaN或白点（默认背景色）
为什么用 border-radius: 50% 有时不是正圆？
常见原因是宽高不相等，或者父容器有 line-height / vertical-align 干扰导致视觉偏移。Layui 单元格默认是 td，自带 padding 和对齐方式。
- 务必显式设置
width和height相同，比如12px，别只设一个 - 加
vertical-align: middle防止上下错位；必要时包裹一层<div style="text-align:center"> 居中 <li>避免用 <code>em或百分比单位，字体缩放或表格响应式时容易失真 - 移动端要注意，
12px在高清屏上可能看不清，可考虑14px起步 - 库存颜色这种简单判断没问题，但若要根据多个字段组合判断（如
stock + preOrder + lockQty），先在parseData或请求后端返回预计算字段更稳妥 - 避免在
templet中调用laydate.render()、layer.open()这类重型 API - 测试方法：打开 Chrome DevTools → Performance → 录制滚动操作，看
Function Call是否集中在templet回调里
渲染性能：大量行时别在 templet 里做复杂计算
表格滚动或重绘时，templet 会被高频调用。如果里面包含循环、正则、DOM 查询或格式化函数（比如把数字转带逗号的字符串），卡顿会很明显。
templet 里堆 || 和三元嵌套，不如统一兜底到“未知状态”色，并加个 console.warn 提示。
