Layui table 不支持 headerContextmenu 事件，需在 done 回调中用事件委托监听 thead th 的 contextmenu，并通过 data-field 获取字段、e.preventDefault() 阻止默认菜单、转换坐标定位浮层，同时处理多级表头、隐藏列、固定列等边界情况。
layui table 的 headerContextmenu 事件根本不存在
layui 官方表格（layui.table）原生不支持表头右键菜单，也没有 headercontextmenu、onheaderrightclick 这类内置事件。所有试图在 cols 配置里加回调、或监听 table.on('headercontextmenu', ...) 的写法都会静默失效。
真正能落地的方案，是手动监听表头 DOM 的 contextmenu 事件，并自行定位触发列 —— 因为表头单元格（th）是动态渲染的，必须等表格重绘完成再绑定。
- 必须等
table.render()的done回调执行后，再查th元素并绑定事件 - 不能在
init阶段就绑，此时 DOM 还没生成 - 如果启用了分页或重载，每次
table.reload()后都要重新绑定（或用事件委托）
用事件委托监听表头右键，避免重复绑定
直接给每个 th 绑 contextmenu 很脆弱：列宽变化、排序图标插入、响应式隐藏都可能让绑定丢失。更稳的方式是把事件监听器挂到表格容器上，用 e.target 判断是否点中了 th。
示例代码（放在 done 回调里）：
table.render({
elem: '#demo',
url: '/api/list',
cols: [[
{field: 'id', title: 'ID'},
{field: 'name', title: '姓名'}
]],
done: function(res, curr, count){
// 用事件委托监听整个表格容器
layui.$('#demo').off('contextmenu', 'thead th').on('contextmenu', 'thead th', function(e){
e.preventDefault();
const $th = layui.$(this);
const index = $th.index(); // 当前列索引（从 0 开始）
const field = $th.data('field'); // Layui 自动加的 data-field 属性
console.log('右键列：', field, '索引：', index);
// 此处调用你的右键菜单（如 layer.open 或自定义浮层）
});
}
});
-
layui.$(...).off(...).on(...)确保每次done都清理旧监听，防止重复绑定 -
data-field是 Layui 渲染时自动写入th的属性，比靠index查配置更可靠（尤其有固定列、隐藏列时） - 注意
e.preventDefault()必须加，否则会触发浏览器默认右键菜单
右键菜单位置偏移、遮挡、消失快的问题
直接用 layer.open 弹菜单容易错位，因为 e.clientX/e.clientY 是视口坐标，而 Layui 表格常在 overflow: auto 的容器里滚动。菜单弹出位置必须转成相对于表格容器的坐标。
- 不要用
layer.open({top: e.clientY, left: e.clientX})—— 滚动后完全错位 - 改用
layer.open({position: 'absolute', top: top + 'px', left: left + 'px'})，其中top和left要减去表格容器的offsetTop/offsetLeft - 菜单 DOM 建议 append 到
layui.table的父容器下，而不是body，避免被overflow: hidden截断 - 菜单点击后要主动
layer.closeAll()，否则连续右键会堆叠多个浮层
隐藏列、固定列、多级表头下的字段识别陷阱
当用了 fixed: 'left'、hide: true 或多级表头（children），th.index() 和实际列顺序、cols 配置顺序不再一一对应。这时候只依赖 data-field 也不够 —— 多级表头里子列没有 data-field，只有顶层 th 有。
- 多级表头：检查
e.target是否是.layui-table-patch（Layui 插入的占位th），跳过它；找最近的带data-field的祖先th - 隐藏列：
layui.$(this).is(':visible')判断是否可见，不可见的列不该响应右键 - 固定列：左右两个表格容器是分离的 DOM，需分别监听
#demo .layui-table-fixed-l thead th和#demo .layui-table-fixed-r thead th
真实场景里，表头右键不是“加个事件就行”，而是得和 Layui 的渲染机制较劲。最麻烦的永远是那些不常触发的边界情况：比如拖拽调整列宽后 th 重排、开启服务端分页后 reload 时机、或者用户快速连点右键导致菜单状态错乱 —— 这些地方没日志、不报错，但功能就是时灵时不灵。
