Layui表格中用templet渲染颜色圆点需用inline-block span设等宽高、border-radius:50%、背景色及vertical-align:middle；颜色应通过映射对象动态绑定，避免硬编码和未定义状态；推荐12px尺寸、6px右间距、inline-flex布局对齐文字。
表格列中用 templet 渲染颜色圆点
layui 的 table.render() 不支持直接在单元格里画圆，必须靠自定义模板。核心是用内联样式控制一个 <span></span> 的宽高、圆角和背景色，再通过 templet 插入到对应列。
常见错误是只设 border-radius: 50% 却忘了宽高相等，结果渲染成椭圆；或者用 background 写了渐变/图片，覆盖了纯色需求。
- 圆点必须用
display: inline-block（或inline-flex），否则width/height无效 - 推荐尺寸：
width: 12px; height: 12px;，太小看不清，太大挤占表格空间 - 颜色值建议从数据字段读取，比如
data.statusColor，避免硬编码 - 加
vertical-align: middle让圆点和文字垂直居中对齐
如何从后端返回的颜色值动态渲染圆点
后端通常返回的是十六进制色值（如 "#ff6b6b"）、英文色名（如 "green"）或状态码（如 1），不能直接塞进 templet 里当 CSS 用——得先映射成合法颜色值。
典型场景是订单状态：后端返回 status: 2，前端要显示橙色圆点；返回 status: 3，显示绿色圆点。这时不能在模板里写一堆 if...else，而应提前建好映射对象。
- 在
table.render()外定义映射：const STATUS_COLOR = {1: '#999', 2: '#ff9800', 3: '#4caf50'} - 在
templet中用：return `<span style="display:inline-block;width:12px;height:12px;border-radius:50%;background:${STATUS_COLOR[d.status] || '#ccc'};vertical-align:middle;"></span>` - 务必加兜底色（如
|| '#ccc'），否则遇到未定义状态会渲染空白或报错
为什么不用 SVG 或 Canvas 实现圆点
有人想用 SVG 的 <circle></circle> 或 Canvas 绘制，实际没必要。Layui 表格每页常有几十上百行，SVG 标签体积大、解析慢；Canvas 需手动获取 DOM 节点再绘图，无法响应式重绘，且与 Layui 的重渲染机制冲突。
更关键的是：圆点只是视觉标记，不需要交互、缩放或动画。纯 CSS 方案零 JS 开销，DOM 轻量，兼容性覆盖所有 Layui 支持的浏览器（IE10+）。
- 避免在
templet中写<svg></svg>—— 会导致表格列宽计算异常 - 禁用
canvas：每次table.reload()都要重新找节点、清空、重绘，极易漏掉或重复 - 如果未来需要 hover 提示，直接给
<span></span>加title属性即可，无需升级为 SVG
圆点和文字共存时的对齐与间距控制
多数业务需要“圆点 + 文字”并排显示（如“● 待审核”），但默认情况下文字会紧贴圆点，显得拥挤；若用空格分隔，又可能因字体差异导致错位。
正确做法是用 CSS 控制间距和基线，而不是依赖字符空格或 <br>（Layui 表格单元格不支持换行标签）。
- 把整个内容包进一个
<div>，设置 <code>display: inline-flex; align-items: center; - 圆点
<span></span>设margin-right: 6px，数值可调，比空格稳定 - 文字部分用
<span></span>包裹，并设line-height: 1.2避免行高撑开高度 - 整列
minWidth建议设为120以上，防止文字过长时挤压圆点
Layui 表格里画圆点看似简单，真正容易出问题的是颜色映射缺失、尺寸单位混乱、以及圆点和文字的基线错位——这三处没处理好，上线后就会出现“有的行圆点偏上、有的行颜色不对、有的行文字被截断”。
