layui-badge需手动渲染，因非纯CSS组件；应在table.render的done回调中调用layui.element.render('badge')，并确保已加载element模块。
templet里写了layui-badge但没样式？必须手动触发渲染
直接在 templet 函数里返回带 layui-badge 类的 html（比如 <span class="layui-badge">已审核</span>），表格渲染后仍显示为普通文字——这不是你写错了，而是 layui 的 badge 不是纯 css 组件，它依赖 element.render('badge') 主动初始化。
常见错误现象：
- 首次加载正常，翻页或
table.reload()后徽章变回白底黑字 - 控制台无报错，但查元素发现缺少
border-radius、padding等关键样式 - 点击筛选/搜索后徽章消失，需刷新页面才恢复
解决方式：在 table.render() 的 done 回调中补调一次渲染：
done: function(res, curr, count) {
layui.element.render('badge');
}
注意：必须确保 layui.use(['table', 'element'], ...) 已加载 element 模块，否则 layui.element 会是 undefined。
字段取值错误导致徽章内容为空？先 console.log(d)
templet 函数的参数 d 是当前行原始数据对象，但实际结构常和预期不一致：
- 后端返回的是嵌套结构（如
d.info.status），而你写了d.status - 启用了
response配置（如把data字段映射为list），导致原始响应体被二次包装 - 某些字段为
null或undefined，直接拼接会显示"undefined"
实操建议：
- 在
templet开头加console.log(d)，确认真实字段路径 - 用空值保护：例如
(d.info?.status || d.status || '未知') - 把徽章逻辑抽成独立函数，避免
templet内堆砌三元表达式
颜色/尺寸类名漏写一个就失效？必须带齐基础类
Layui badge 的样式强依赖类名组合，缺一不可：
- 主类
layui-badge必须存在，否则整个样式链断裂 - 尺寸类如
layui-badge-sm要和主类一起写：class="layui-badge layui-badge-sm" - 颜色类如
layui-bg-red同样不能单独用，必须搭配layui-badge
错误写法示例（不会生效）：
<span class="layui-bg-red">重要</span>
正确写法：
<span class="layui-badge layui-bg-red">重要</span>
自定义颜色更推荐用内联样式（避免污染全局）：
templet: function(d) {
const bg = d.priority === 'high' ? '#ff4d4f' : '#52c418';
return '<span class="layui-badge" style="background-color:' + bg + ';color:#fff;">' + d.priority + '</span>';
}
想免模块加载、快速出效果？用内联样式模拟最稳
如果只是展示静态状态（如“启用/停用”“通过/驳回”），且对交互无要求（比如 hover 变色、动态更新），完全没必要等 element.render()，直接用内联样式模拟 badge 基础视觉：
- 核心样式就是：
display: inline-block、border-radius: 10px、padding: 0 10px、line-height: 18px - 颜色用
background-color直接写死，文字色用color控制 - 跳过模块加载，彻底规避
done延迟、render时机错位等问题
示例（零依赖）：
templet: function(d) {
const color = d.status === 1 ? '#52c418' : '#f5222d';
const text = d.status === 1 ? '启用' : '停用';
return '<span style="display:inline-block;border-radius:10px;padding:0 10px;line-height:18px;background-color:' + color + ';color:#fff;">' + text + '</span>';
}
这种写法在后台管理页中足够用，尤其适合分页频繁、重载多、又不想处理模块加载时序的场景。
最易被忽略的一点：badge 的 DOM 节点是在表格 tbody 渲染完成后才插入的，所以 done 回调里调 element.render('badge') 是安全的；但如果表格开启了 height（虚拟滚动），部分节点可能延迟挂载，此时需要监听 scroll 或改用 MutationObserver，不过绝大多数后台表格并不需要走到这一步。
