Layui表格列事件需在列配置中设event字符串(如"showName"),且templet内按钮的lay-event值必须严格一致;监听必须用table.on('tool(表ID)'),绑定一次即可,重复绑定或未加载table模块会导致失效。

直接在列配置里加 event 字符串,并确保对应单元格内有带 lay-event 的元素,否则点击完全没反应。
列定义里怎么写 event 才生效
它不是函数,也不是布尔值,就是一个纯字符串,比如 "detail" 或 "copy":
{ field: 'name', title: '姓名', event: 'showName', templet: '<button class="layui-btn layui-btn-xs" lay-event="showName">查看</button>' }
-
event必须和templet里的lay-event值严格一致(大小写敏感) - 如果列没写
templet,又想整列响应,别给td直接加lay-event——Layui 内部事件代理不认这个 - 字段名(
field)和事件名(event)是两回事,别混淆
监听逻辑必须用 table.on('tool()')
不是 jQuery 的 click,也不是 table.on('row()'),必须走 Layui 封装的工具列事件通道:
table.on('tool(userTable)', function(obj){ if(obj.event === 'showName'){ console.log('点击了姓名列,数据:', obj.data); } });
-
userTable是你table.render()里设的id或elem对应的唯一标识 -
obj.data是当前行完整数据对象,不是 DOM 元素,别去$(obj.tr)里找 - 如果用了
table.reload(),table.on()必须只执行一次;重复绑定会导致点一下触发多次回调
点了没反应?先查这三处
90% 的问题卡在这儿:
- 浏览器控制台报
Cannot read property 'on' of undefined→table模块根本没加载,确认layui.use(['table'], ...)已执行 - 右键审查元素,看目标
<button lay-event="showName"></button>是否真实存在于渲染后的td里,而不是写在templet字符串里但被 HTML 转义了 - 用了
table.reload()却把table.on()写在done回调里 → 每次重载都叠加一次监听,点一次就弹三次
真正麻烦的不是写法,而是「列事件」本质是为按钮类操作设计的;硬改成整列可点,后续排序、服务端分页、虚拟滚动时容易映射错行或丢失上下文。


















