最直接方式是用templet函数返回带class的标签，配合CSS定义.status-dot基础样式及.success/.warning/.error背景色，避免内联style以保障安全与可维护性。
用 templet 渲染带颜色的圆点图标最直接
layui 表格不支持原生状态图标，必须靠列的 templet 函数手动拼 html。核心是根据字段值返回不同 class 的 <span></span>，再用 css 控制宽高、背景色和圆角。
常见错误是直接写死颜色（比如全用 red），导致状态变化时图标不变；或者忘了加 display: inline-block，圆点塌陷成一条线。
- 状态字段假设叫
status，值为"success"/"warning"/"error" - 在列配置中写：
templet: function(d) { return '<span class="status-dot ' + d.status + '"></span>'; } - CSS 需定义基础样式：
.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }，再分别定义.success { background: #5FB878; }、.warning { background: #F7B824; }、.error { background: #FF5722; }
为什么不能只靠 style 内联写颜色
内联 style="background:#5FB878" 看似简单，但会破坏 CSS 可维护性，且无法复用 hover、动画等效果。更重要的是：Layui 在重绘表格（如分页、排序、搜索）时会反复调用 templet，每次拼字符串生成 style，容易因引号嵌套出错或 XSS 风险（尤其当 status 值来自后端未过滤时）。
- 若 status 是用户可控字段（如表单提交），内联 style 可能被注入恶意 CSS 或 JS
- 后续要加「小圆点旁显示文字」或「点击变色」时，class 方式更易扩展
- Layui 官方示例和社区主流实践都倾向 class 控制视觉态
templet 中取不到数据或报 d is undefined 怎么办
这是模板函数执行时机问题——templet 在渲染每一行时调用，但如果你在函数外提前引用了 d，或把 templet 写成了箭头函数又用了 this，就可能丢失上下文。
- 确保写法是：
templet: function(d) { return '...'; }，不是templet: (d) => { ... } - 不要在 templet 外部访问
d，它只在函数体内有效 - 调试时可先加
console.log(d)确认是否拿到整行数据对象；若为undefined，大概率是列配置写在了cols数组之外，或漏了field导致 layui 无法关联数据
圆点太小看不清？适配移动端要注意什么
10px 圆点在手机上手指难点击，且高密度表格里容易误判。单纯放大尺寸会导致行高撑开、对齐错乱。
- 推荐用
em或rem单位：width: 0.6em; height: 0.6em;，随父级字体缩放 - 加一点垂直居中微调：
vertical-align: middle; margin-right: 4px;，避免和文字基线错位 - 真要响应式，可用媒体查询：
@media (max-width: 768px) { .status-dot { width: 12px; height: 12px; } } - 别用
transform: scale()，会模糊像素，且影响父容器布局计算
