需在templet中返回带layui-badge类的HTML并手动调用element.render('badge')，且确保加载element模块、字段路径正确、class完整、列宽足够。
layui表格的templet里怎么渲染layui-badge
不能直接在templet字符串里写<span class="layui-badge">已审核</span>——这只会显示纯html，不会触发layui的badge样式和交互逻辑。layui的layui-badge不是纯css组件，它依赖layui.use('element')初始化后由element.render()接管渲染。
实操建议：
- 在
templet中返回带layui-badge类名的HTML，比如：return '<span class="layui-badge layui-bg-green">' + d.status + '</span>'; - 确保表格所在模块已加载
element模块：layui.use(['table', 'element'], function(){...}) - 渲染完表格后，手动调用
element.render('badge')，否则徽章无样式、无圆角、无背景色
为什么element.render('badge')必须手动调用
Layui的element模块默认只在页面首次加载时自动渲染一次DOM中的badge元素。表格是动态生成的（尤其是开启分页、重载或使用table.reload()时），新插入的layui-badge节点不会被自动捕获。
常见错误现象：
- 首次打开页面时badge正常，翻页后变成普通文字
- 点击搜索重载表格后，所有badge丢失样式
- 控制台无报错，但
getComputedStyle查不到border-radius或background-color
解决方式：在done回调里补渲染
done: function(res, curr, count){
element.render('badge'); // 关键：每次数据加载完成都执行
}
使用templet时参数d字段取值要注意什么
d是当前行原始数据对象，但如果你开启了response配置（比如把data字段改成list），或者后端返回结构嵌套（如d.info.status），直接写d.status会undefined，导致徽章内容为空。
使用场景与判断建议：
- 先
console.log(d)确认字段路径，别凭经验硬写 - 状态值建议做空值保护：
d.status || '未知' - 颜色逻辑建议抽离成函数，避免
templet里堆条件判断：return badgeRender(d.status);
徽章颜色和尺寸的class怎么选才不冲突
Layui badge的layui-bg-*和layui-badge-sm等class必须和layui-badge一起存在，漏掉主类名会导致样式完全失效。
常见错误写法：
-
<span class="layui-bg-red">拒绝</span>→ 缺少layui-badge，无效 -
<span class="layui-badge layui-bg-red layui-badge-sm">小红点</span>→ 正确 - 自定义颜色时不要覆盖
layui-badge的display: inline-block和padding，否则圆角/高度异常
兼容性提示：Layui 2.8+ 支持layui-badge-dot（圆点徽章），但需配合layui-badge使用，单独用无效。
最常被忽略的一点：表格列宽不够时，badge会换行或溢出。给对应field列加minWidth: 80或width: 100，不然手机上看可能只显示半个“已”字。
