必须在table.render的done回调中调用layui.element.render('badge')，因layui-badge非纯CSS组件，依赖JS初始化；templet返回带layui-badge类的HTML后，需手动渲染才能生效。
layui table 单元格里直接用 layui-badge 不生效怎么办
因为 layui table 的单元格内容默认是纯文本渲染，layui-badge 这类带 class 的 HTML 片段不会被自动初始化为 badge 组件。必须手动触发 badge 渲染，或改用 table 的 templet 配合 layui.element.render()。
用 templet 返回 badge HTML 并主动渲染
这是最稳妥的方式：在列配置中用 templet 返回带 layui-badge class 的 HTML 字符串，再在 done 回调里调用 layui.element.render('badge')。
-
templet内返回类似<span class="layui-badge layui-bg-green">已审核</span>的字符串（注意引号转义） - 必须在
table.render()的done回调中执行layui.element.render('badge')，否则 badge 样式和交互不生效 - 如果表格启用了分页或重载，每次数据刷新后都要重新 render badge，不能只在首次 done 中调一次
table.render({
elem: '#demo',
url: '/api/list',
cols: [[
{field: 'status', title: '状态', templet: function(d) {
if (d.status === 1) return '<span class="layui-badge layui-bg-green">启用</span>';
return '<span class="layui-badge layui-bg-gray">停用</span>';
}}
]],
done: function() {
layui.element.render('badge'); // 关键：必须加这一句
}
});
为什么不能只靠 class 就显示 badge
layui 的 badge 不是纯 CSS 组件，它依赖 element 模块的 JS 初始化逻辑（比如自动处理 data-badge、绑定点击事件等）。table 渲染时只是插入 innerHTML，并不触发 element 的自动解析，所以得显式调用 render。
- 漏掉
layui.element.render('badge')→ badge 看起来像普通 span，无圆角、无背景色、无 hover 效果 - 把
render写在init阶段而非done→ DOM 还没生成，render 无效 - 多个 badge 类型混用（如
layui-bg-red、layui-bg-orange）→ 不需要额外操作，render('badge')通吃
想动态控制 badge 显示/隐藏，但用 v-if 或 ng-if 会失效
如果你在 Vue/Angular 项目里混用 layui table，千万别用框架的条件指令包裹 badge —— table 的 DOM 是 layui 自己生成并管理的，框架无法响应式监听其内部变化，会导致 badge 错位、重复渲染或丢失事件。
- 正确做法：在
templet函数里做判断，只返回需要的 badge HTML，不返回则留空 - 避免在 badge 外层套
<div v-if="...">，这会让 layui 无法准确定位渲染节点 <li>如果 badge 需要响应数据变化（比如 status 改变后实时更新），必须调用 <code>table.reload()或手动修改 DOM 后再次layui.element.render('badge')
layui 的 badge 渲染依赖明确的 JS 初始化时机，不是写对 class 就完事；最容易忽略的是每次数据变更后都得补一次
layui.element.render('badge')，尤其在使用 table.reload() 或编辑行后局部更新时。
