Layui如何实现在表格操作列显示一个跟随鼠标滑动的悬浮操作按钮-Layui教程-PHP中文网

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 是全局浮动的，不随行移动。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

正确写法（列配置）：

{ 
  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>
    `;
  }
}