Layui表格cell事件中event.field为undefined,因官方未挂载该属性;应通过event.td.dataset.key提取列索引再查config.cols0.field。
点击单元格时怎么拿到对应的 field?
layui 表格的单元格点击事件本身不直接暴露 field,必须通过事件对象反查列配置。关键在 event.tr(或 event.td)和表格实例的 config.cols 对齐索引。
- 监听
table.on('cell(filter)', callback),这是唯一能精准捕获单个单元格点击的内置事件 -
callback的第二个参数是event,它包含event.cell(DOM 元素)、event.tr(所在行)、event.td(当前<td>) <li>用 <code>event.td.cellIndex获取该单元格在行内的列序号(从 0 开始) - 再根据这个序号去查
table.config.cols[0][index](假设只有一级表头),取其field属性 - 官方示例里出现的
event.field多为用户自己补的逻辑,不是 Layui 原生提供 - 如果直接打印
event,你会看到event.colspan、event.rowspan,但没有field - 错误做法:试图解构
{ field }或读event.field→ 一律返回undefined - 简单场景(无合并):用
cellIndex查cols[0]安全 - 有合并表头时:必须遍历
config.cols[0],比对event.td的dataset.key(Layui 内部会为每个<td> 注入 <code>data-key,值形如"layui-table-cell-0-2",末尾数字即列索引) - 稳妥写法:
const key = event.td.dataset.key?.split('-').pop() || '0'; const col = table.config.cols[0][key];
为什么 event.field 是 undefined?
Layui 2.8.x 及之前版本的 cell 事件回调中,event 对象**没有 field 字段**——这是文档没写清楚、但源码里确实没挂载的常见误解点。
合并表头(多级表头)时 cellIndex 还准吗?
不准。当存在 colspan 或 rowspan 时,event.td.cellIndex 返回的是 DOM 表格结构里的物理列序,而 config.cols[0] 是逻辑列定义,二者可能错位。
完整可抄的获取逻辑(含兼容处理)
别拼接字符串或手动维护映射,直接靠 dataset.key 最稳。以下代码可直接塞进 cell 回调里:
table.on('cell(test)', function(obj){
const td = obj.event.target.tagName === 'TD'
? obj.event.target
: obj.event.target.closest('td');
if (!td) return;
// 优先用 data-key(Layui 自动加的)
const key = td.dataset.key?.match(/-\d+$/)?.[0]?.slice(1);
if (key != null && table.config.cols[0][key]) {
console.log('field:', table.config.cols[0][key].field);
}
});
注意:如果列配置里没设 field(比如用了 templet 但漏写 field),那取出来就是 undefined —— 这不是代码问题,是配置缺失。










