Layui表格徽章需用templet函数渲染，如templet: d => ${d.status || '未知'}，避免XSS转义；颜色须手动指定layui-bg-green等有效类名；需处理字段缺失、类型不一致及移动端截断问题。
表格列用 templet 渲染徽章，别硬塞 HTML 字符串
直接在 cols 里写 templet: '<span class="layui-badge">在线</span>' 看似简单，但实际会触发 xss 过滤，layui 会把标签转义成纯文本。真正生效的方式是传函数，让 layui 在渲染时执行 dom 操作。
- 必须用函数形式：
templet: function(d) { return '<span class="layui-badge layui-bg-green">在线</span>'; } - 别漏掉
d参数——它是当前行的完整数据对象，状态判断逻辑全靠它 - 如果返回空字符串或
undefined，单元格会留白，不是显示“undefined” - 不建议在函数里拼大段 HTML，状态少就用三元表达式内联，比如：
templet: d => `<span class="layui-badge layui-bg-${d.status === 'online' ? 'green' : 'gray'}">${d.status === 'online' ? '在线' : '离线'}</span>`
layui-bg- 类名必须手动配色，没有自动映射
Layui 的徽章颜色靠 layui-bg-green、layui-bg-blue 这类类名控制，它不会根据文字内容自动选色。你写 layui-bg-online 是无效的，CSS 里根本没这个规则。
- 可用的基础色只有：
green、blue、red、orange、gray、cyan - 如果状态值是英文（如
'active'），得自己做映射：const bgMap = { active: 'green', inactive: 'gray', error: 'red' };，再拼进 class - 想加自定义色？只能额外写 CSS，比如
.layui-bg-critical { background-color: #ff5722; }，然后在templet里用
状态字段为空或 undefined 时，徽章容易错位或报错
当后端返回的字段缺失（比如 d.status === undefined），直接取值会导致 Cannot read property 'xxx' of undefined，整个表格列可能空白甚至卡住。
- 务必做兜底处理：
templet: d => `<span class="layui-badge layui-bg-${d.status || 'gray'}">${d.status || '未知'}</span>` - 更稳妥写法是先判断存在性：
templet: d => d.status ? `<span class="layui-badge layui-bg-${d.status === 'online' ? 'green' : 'red'}">${d.status}</span>` : '<span class="layui-badge layui-bg-gray">无状态</span>' - 如果状态是数字（如
1/0），别忘了类型转换，1 == '1'成立但1 === '1'不成立，用===就得统一类型
移动端小屏下徽章文字被截断，需要微调样式
默认 .layui-badge 的 padding 和 font-size 在手机上容易撑出单元格，尤其两字状态（如“离线”）会被砍掉右边。
- 加一行响应式覆盖即可：
table .layui-table td .layui-badge { padding: 1px 6px; font-size: 12px; } - 别用
!important，Layui 的 CSS 权重不高，直接在页面<style></style>里写同选择器就能生效 - 如果用了
cellMinWidth或固定列宽，确保宽度 ≥ 40px，否则徽章会换行或挤压变形
