直接在templet中返回带内联样式的●字符HTML，如<span style="display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#52c418;color:#fff;font-size:12px;">●</span>，确保尺寸固定、无padding、垂直居中且颜色映射安全。
layui table 单元格里怎么渲染带颜色的圆形标签
直接用 templet 返回带样式的 html 字符串就行，别碰 cellminwidth 或强行改 css 类名——那会破坏表格自动列宽计算。
为什么不能用纯 CSS 圆角 + background 实现“圆形”
因为 layui 的 td 默认有 padding、line-height 和 vertical-align，光靠 border-radius: 50% 很容易变成椭圆或错位。必须同时控制尺寸、内边距和对齐方式。
- 固定宽高：比如
width: 16px; height: 16px;，否则文字撑开就不是圆 - 去掉默认 padding：
padding: 0;，不然左右留白会让圆变宽 - 垂直居中要用
display: inline-flex; align-items: center; justify-content: center;，比line-height更稳
templet 函数里怎么写才不踩坑
别拼接大段 HTML 字符串，也别在 templet 里调用外部函数——layui 渲染时上下文不稳定，容易报 undefined is not a function。
- 颜色映射逻辑尽量内联，比如：
const colorMap = {success: '#52c418', warning: '#faad14', danger: '#f5222d'} - 返回字符串必须是完整、闭合的 HTML，比如：
`<span style="...">${d.status}</span>`，不能漏掉引号或反引号 - 如果状态值可能为空或非法，加兜底：
colorMap[d.status] || '#999'
templet: function(d) {
const colorMap = {online: '#52c418', offline: '#f5222d', pending: '#faad14'};
const bg = colorMap[d.status] || '#ccc';
return `<span style="display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:${bg};font-size:12px;color:#fff;">●</span>`;
}
移动端适配和性能要注意什么
小屏下 16px 圆点会被缩放挤压，而且每个单元格都跑一次字符串拼接，在千行表格里会明显卡顿。
- 用
●字符（U+25CF）代替空span+font-size控制大小，更轻量、抗缩放 - 避免在
templet里做复杂判断或请求，所有状态映射必须是同步、无副作用的 - 如果要支持主题色切换，别硬编码颜色值，从 layui 的
layui.setter或全局变量读取
最麻烦的是表格列宽自适应——一旦用了固定宽高的 span，layui 就不会按内容撑开列宽，得手动设 minWidth 或用 unresize: true 锁死列宽。
