Layui表格中渲染Tag标签需用templet返回带data-id和class的HTML字符串,并通过table.on('tool(...)或事件委托绑定点击;须自定义CSS控制样式,透传标签标识以区分点击目标。
单元格内渲染 Tag 标签需用 templet 返回带 class 的 HTML 字符串
直接在列配置中写 templet: '<span class="layui-tag">标签</span>' 是无效的——layui 不会自动为字符串添加点击行为,也不会识别 layui-tag 类的交互逻辑。必须手动包裹可点击容器,并绑定事件委托。
正确做法是:在 templet 中返回一个带 data-id 和统一 class(如 tag-item)的 <span> 或 <div>,再通过外部事件监听器接管点击。
-
templet必须返回字符串,不能返回 jQuery 对象或 DOM 节点 - 每个标签建议加
style="cursor: pointer;"提示可点击 - 避免在
templet里拼接大量 HTML,尤其含用户输入时,先做 XSS 过滤(如layui.util.escape(d.tag)) - 若标签数量动态(如
d.tags是数组),需在templet内遍历生成,别漏掉空数组兜底
监听单元格内 Tag 点击要用 table.on('tool(…) 还是 $(document).on('click', '.tag-item', …)?
优先用 table.on('tool(…),前提是列定义里设置了 event 属性;否则用 $(document).on('click', '.tag-item', …) 更灵活但需注意事件代理范围。
如果列配置写了 event: 'tag-click',那么 templet 只需返回带 lay-event="tag-click" 的元素,Layui 会自动触发 tool(…) 回调;没设 event 就得自己绑原生 click,且要确保 delegate 到 document 或 table 容器(因为表格重绘后 DOM 会重建)。
- 用
tool方式:列定义加event: 'tag-click',templet内写<span lay-event="tag-click" data-value="xxx">xxx</span> - 用原生 click:确保选择器匹配到重绘后的新节点,推荐
$(document).on('click', '.tag-item', handler) - 两种方式都要从
result.data(tool)或$(e.target).closest('tr').data('index')(原生)拿到当前行数据
Tag 标签组样式不生效或排版错乱怎么办
Layui 默认没有 .layui-tag 样式,所谓“Tag”只是语义称呼,实际要靠自定义 CSS 控制外观和间距。常见问题是标签堆成一行没换行、鼠标悬停无反馈、移动端点击区域太小。
最小可用样式建议直接加在页面 <style> 里:
`.tag-item {
display: inline-block;
padding: 0 8px;
margin: 2px 4px;
background: #e6f7ff;
color: #1890ff;
border-radius: 2px;
font-size: 12px;
line-height: 1.5;
cursor: pointer;
}
.tag-item:hover {
background: #91d5ff;
color: #0050b3;
}`
- 别依赖
layui.css里的任何 tag 相关类,它压根没提供 - 用
display: inline-block而非inline,便于控制宽高和 hover - 移动端点击热区至少保证
min-height: 24px,否则 iOS 上容易点不中 - 如果标签文字过长,加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
多个 Tag 如何区分点击的是哪一个
不能只靠 result.data 拿整行数据,必须把单个标签的标识(如 ID、code、name)透传到 DOM 上,再从事件目标提取。
最稳妥的方式是在 templet 中为每个 <span> 添加 data-tag-id 或 data-tag-value,点击时用 $(e.target).data('tagId') 或 e.target.dataset.tagId 读取。
- 错误示范:
templet: d.tags.map(t => '<span>' + t + '</span>').join('')—— 没法区分点击目标 - 正确示范:
templet: function(d) { return d.tags.map(t => '<span class="tag-item" data-tag-id="' + t.id + '">' + layui.util.escape(t.name) + '</span>').join(''); } - 如果标签来自后端数组,注意检查
d.tags是否为数组,避免.map报错,加Array.isArray(d.tags) ? ... : [] - 别在 click 处理函数里重复查 DOM 找兄弟节点,直接从
e.target取 data 属性最轻量
templet 要花更多功夫。


















