核心思路是用templet渲染带data-src的缩略图，在done回调中绑定mouseenter/mouseleave事件，动态创建fixed定位浮层并精确计算位置，避免被overflow:hidden或transform截断。
layui table 图片列 hover 显示大图浮层的核心思路
直接用 layui.table 的 templet 渲染带 data-src 的缩略图，配合原生 mouseenter/mouseleave + 绝对定位浮层实现，不依赖第三方插件，也不用改 layui 源码。
关键在于：缩略图必须保留原始高清图地址（不能只存缩略图路径），且浮层要手动控制显隐和位置，避免被表格 overflow: hidden 截断。
templet 中正确写法与 data-src 保留逻辑
在列定义里用 templet 返回带 data-src 的 <img>，高清地址存在自定义属性里，不塞进 src —— 否则缩略图加载慢、重复请求、无法区分源图。
-
src用缩略图地址（如加了?x-oss-process=image/resize,w_120的 CDN 地址） -
data-src存原始高清图完整 URL（如https://xxx.com/img/abc.jpg） - 加
class="layui-table-img-hover"便于后续统一绑定事件
{field: 'cover', title: '封面', templet: function(d){
return '<img src="' + (d.cover_thumb || d.cover) + '" ' +
' ' +
'class="layui-table-img-hover" ' +
'style="max-width:60px;cursor:pointer;">';
}}
浮层 DOM 创建与事件绑定时机
不能在 table.render() 前就绑定事件，因为表格内容是异步渲染的；也不能用 document.addEventListener('mouseenter', ...) 全局监听——性能差且易冲突。最佳做法是在 done 回调里操作已渲染的 DOM。
- 在
done回调中查出所有.layui-table-img-hover元素 - 每个元素绑定
mouseenter：创建浮层<div class="layui-img-popover"><img></div>并 append 到body - 绑定
mouseleave：延时 100ms 移除浮层（防移入移出抖动） - 浮层
position: fixed，用getBoundingClientRect()计算位置，避开表格滚动条和边缘
注意：如果表格启用了 height（固定高度），需监听 scroll 事件更新浮层位置，否则滚动时浮层会错位。
样式与兼容性避坑点
浮层默认会被 .layui-table-view 的 overflow: hidden 或 transform 层叠上下文截断，必须破除。
- 给浮层加
style="z-index: 999999; pointer-events: none;"，内部<img>单独设pointer-events: auto - 确保浮层父级没设置
transform、filter或will-change，否则会创建新层叠上下文压住浮层 - IE11 下
getBoundingClientRect()在缩放页面时可能不准，建议加window.devicePixelRatio补偿 - 移动端慎用 hover，可改用点击触发，或加
touchstart兼容
最常被忽略的是：表格容器如果有 transform: translateZ(0)（常见于某些 UI 框架 hack），浮层必须挂到该容器外层，比如 document.body，否则永远显示不全。
