layui表格需用templet自定义模板渲染多个label，因field默认转义html且不解析标签；应手动拼接带样式的label并用 分隔，固定列下需调整display和max-width防错位。
直接在 layui 表格单元格里渲染多个 label 标签是可行的，但必须用 templet 自定义模板，不能靠默认字段渲染——因为 layui 的 field 字段只做纯文本或简单格式化，不解析 html。
为什么不能直接写 field: 'tags' 就显示 label？
Layui 表格默认会对字段值做 HTML 转义（防止 XSS），所以如果你后端返回的是 "<label class="layui-btn layui-btn-xs">已审核</label><label class="layui-btn layui-btn-xs layui-btn-danger">待支付</label>"，表格会原样输出转义后的字符串，而不是渲染成按钮。
必须显式关闭转义，并控制 HTML 结构生成。常见错误现象包括：
- 页面上直接看到
<label>...</label>这类源码 - label 样式错乱、无边距、堆叠在一起
- 点击事件无法绑定（因为 DOM 是动态插入的）
用 templet 渲染带多个 label 的单元格
推荐写法：在 cols 配置中为该列指定 templet 函数，手动拼接 label 元素，并加基础样式隔离。
示例（字段 statusList 是数组，如 ["已审核", "待支付", "高优先级"]）：
templet: function(d) {
if (!Array.isArray(d.statusList) || d.statusList.length === 0) return '-';
return d.statusList.map(tag => {
let cls = 'layui-btn layui-btn-xs';
if (tag.includes('已')) cls += ' layui-btn-normal';
if (tag.includes('待')) cls += ' layui-btn-warning';
if (tag.includes('高')) cls += ' layui-btn-danger';
return '<label class="' + cls + '">' + tag + '</label>';
}).join(' ');
}
关键点：
- 用
white-space: nowrap下空格会被合并） - 不要依赖后端传来的 HTML 字符串，自己构造更安全、可控
- 给每个
label加layui-btn-xs是为了适配表格行高；不加的话容易撑高整行 - 如果字段是字符串（如逗号分隔），先用
d.tags.split(',')再 map
固定列（fixed: true）下 label 显示异常怎么办？
固定列场景下，label 可能被遮挡、错位或宽度计算失准。这是因为 Layui 固定列使用了独立的 DOM 容器和 transform 定位，导致子元素的盒模型行为变化。
解决方法：
- 给 label 外层加
display: inline-flex或display: inline-block，避免换行干扰 - 显式设置
max-width: 120px并配合overflow: hidden防止溢出破坏布局 - 避免在
templet中写复杂嵌套结构（比如div > label），扁平化为label直接并列 - 测试时务必打开浏览器开发者工具，检查固定列容器的
transform值是否影响了 label 的定位
最易被忽略的是响应式场景：小屏幕下多个 label 横向放不下，但 Layui 表格默认不换行。如果业务允许，建议加一句 white-space: normal 到 label 上，并限制单个 label 最大宽度，否则在手机端可能直接撑破表格容器。
