应在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"，可能压住你的自定义属性，但不影响属性存在，只是开发者工具里不易一眼看到
data-id 这种属性不参与 Layui 渲染逻辑，只依赖你写的模板是否真被插入到最终 DOM 中——盯住浏览器开发者工具的 Elements 面板，展开对应单元格，找得到 data-id 就算成功，找不到就回去核对 templet 是否被正确执行。
