Layui表格操作列无法用CSS:hover实现鼠标跟随按钮，必须用JavaScript动态监听mousemove事件，通过closest('tr')定位当前行并绝对定位按钮，同时需处理分页、触屏、fixed列等兼容问题。
表格操作列无法直接用 CSS :hover 实现跟随鼠标悬浮按钮
因为 layui 表格存在行复用（tr 元素被反复填充数据）、虚拟滚动（部分版本）和重绘机制，直接给 td 或按钮加 :hover 会导致状态错乱：比如鼠标移开后按钮仍显示，或悬停到 a 行却触发了 b 行的按钮。layui 渲染后 dom 是静态的，不维护 hover 状态映射关系。
必须用 JavaScript 动态监听 + 定位 + 位置计算，而不是纯样式方案。
- 不要写
td .opt-btn { display: none; } td:hover .opt-btn { display: block; }—— 表格分页、排序、搜索后会失效 - 不要在
templet中直接写onmouseenter内联事件 —— 滚动/重绘后绑定丢失 - 按钮容器需有固定 class（如
class="follow-btn"），且包裹在独立div内，避免被layui-table-cell的 flex 布局挤压变形
用 mousemove + closest('tr') 实现真·跟随效果
核心是监听表格容器的 mousemove，实时获取鼠标坐标，再通过 e.target.closest('tr') 定位当前行，最后把按钮绝对定位到鼠标附近（加偏移防遮挡）。
示例代码（放在 done 回调里）：
done: function(res) {
const $table = $('#demo'); // 表格容器
let $currentBtn = null;
$table.on('mousemove', 'tbody tr', function(e) {
const $tr = $(e.currentTarget);
const $btnWrap = $tr.find('.follow-btn');
if ($btnWrap.length === 0) return;
// 清除上一个激活的按钮
if ($currentBtn && !$currentBtn.is($btnWrap)) {
$currentBtn.removeClass('showing').css({ left: '-9999px' });
}
// 显示当前按钮，并定位到鼠标右下方
$btnWrap.addClass('showing').css({
left: e.pageX + 10,
top: e.pageY + 10
});
$currentBtn = $btnWrap;
});
// 移出表格区域时隐藏
$table.on('mouseleave', function() {
if ($currentBtn) {
$currentBtn.removeClass('showing').css({ left: '-9999px' });
$currentBtn = null;
}
});
}
-
.follow-btn需设position: absolute; z-index: 999;，父容器td要加position: relative; - 加
left: -9999px而非display: none，避免影响 DOM 流式布局和 layer.tips 等依赖可见性的组件 - 注意防抖：如果按钮内含
layer.open或 AJAX，需额外对点击加data-clicking控制，否则快速移动鼠标再点可能触发多次
templet 中必须返回带定位容器的按钮结构
不能只写 <button lay-event="edit">编辑</button> —— 这样按钮没容器，无法精准定位；也不能把按钮写在 toolbar 里 —— toolbar 是全局浮动的，不随行移动。
正确写法（列配置）：
{
field: 'id',
title: '操作',
width: 120,
templet: function(d) {
return `
<div class="follow-btn-wrap" style="position:relative;">
<button class="layui-btn layui-btn-xs follow-btn"
lay-event="edit"
data-id="${d.id}">
编辑
</button>
</div>
`;
}
}
-
.follow-btn-wrap是必须的相对定位父容器，确保.follow-btn的absolute定位以它为基准 - 按钮本身要带
lay-event，才能被table.on('tool(filter)')正常捕获 - 避免在
templet中拼接大量 HTML 属性（如onclick），否则与 Layui 事件委托冲突
移动端和高密度表格的兼容要点
鼠标跟随在触屏设备上无意义，且小屏幕下按钮贴着手指会遮挡内容。必须做环境判断和降级处理。
建议逻辑：
- 用
'ontouchstart' in window或matchMedia('(hover: none)').matches判断是否为触屏设备 - 触屏下自动回退为「点击显示」：
click触发时toggleClass('showing')，并用setTimeout3s 后自动隐藏 - 表格行高
< 40px时，取消跟随，改用layer.tips()在按钮上方提示（避免按钮挤出单元格） - 若列启用了
fixed: 'right'，需监听scroll事件重新计算left值，否则按钮会脱离右侧固定列
真正难的不是实现跟随，而是让这个“跟随”在分页、排序、搜索、缩放、触屏切换时都不掉链子 —— 所有定位逻辑必须基于当前渲染完成的 DOM 快照，不能依赖闭包缓存的旧坐标或旧 tr 引用。
