Layui表格怎样给特定列添加自定义的HTML属性data-id

作者：袖梨 2026-07-06

应在templet中手动添加data-id属性，如templet: function(d) { return '<div data-id="' + d.id + '">' + d.id + '</div>'; }，而非在列配置中直接写data-id。

layui table 列配置中怎么加 `data-id` 这类自定义属性

不能直接在 cols 里写 data-id，layui 的列定义（field / title / templet）不解析 html 属性。真正起作用的是 templet 函数或字符串模板——它控制单元格里最终渲染的 html 内容。

常见错误是试图这样写：

{  field: 'id',  title: 'ID',  data-id: '123' // ❌ 完全无效，Layui 忽略}

正确做法是用 templet 手动拼出带 data-id 的标签：

如果只是展示纯文本，用函数模板最灵活：

templet: function(d) {  return '<div data-id="' + d.id + '">' + d.id + '</div>';}

如果想保留默认对齐/样式，可套一层 <div class="layui-table-cell">，但注意别破坏表格盒模型
d 是当前行数据对象，确保字段名（如 d.id）真实存在，否则会报 Cannot read property 'id' of undefined

用 `templet` 字符串写法时要注意引号嵌套和转义

字符串模板看着简洁，但 JS 引号和 HTML 引号容易打架，一不留神就语法错误或属性值截断。

推荐外层用单引号，内部 HTML 属性用双引号：
```
templet: '<span data-id="{{d.id}}">{{d.name}}</span>'
```
如果字段值本身含双引号（比如用户昵称是 Alice "Dev"），{{d.name}} 会直接注入，导致 HTML 结构损坏——此时必须改用函数模板并做 escape
Layui 的 {{d.xxx}} 是简单替换，不做 HTML 转义，有 XSS 风险，敏感字段（如用户输入内容）务必走函数 + layui.laytpl.escape

为什么不用 `event` 或 `lay-event` 替代 `data-id`

lay-event 是 Layui 表格的事件绑定机制，用于触发工具栏/行内操作，它不负责存数据；data-id 是你主动挂载的 DOM 属性，目的是后续用原生 JS 拿：tr.querySelector('[data-id]').dataset.id 或 jQuery 的 $('td').data('id')。

立即学习“前端免费学习笔记（深入）”；

如果只为了点击后取 ID，用 lay-event + d.id 参数更轻量，无需 DOM 属性
但如果需要鼠标悬停、批量选中、或配合第三方库（如拖拽排序），data-id 这种显式属性更可控、更易调试
混用时注意：同一列同时设 templet 和 lay-event 是允许的，但 lay-event 绑定的是整个单元格，不是你 templet 里写的那个 <span>

渲染后发现 `data-id` 没生效？检查这三点

最常卡在这几个地方，不是代码写错，而是没意识到 Layui 的执行时机或 DOM 结构限制。

表格未开启 done 回调就去查 DOM —— data-id 是在表格重绘后才写入的，得等 done 触发后再操作：
```
done: function(res, curr, count) {  // 此时 DOM 已更新，可以安全 querySelector}
```
用了 skin: 'line' 或 'nob' 等皮肤，单元格包裹元素变了（比如从 <div> 变成 <span>），你写的 templet 里 <div data-id> 可能被外层样式覆盖或折叠
开启了 cellMinWidth: true 或设置了固定列宽，Layui 会强制给单元格加 style="width: xxxpx"，可能压住你的自定义属性，但不影响属性存在，只是开发者工具里不易一眼看到