Layui项目中解决Table右键菜单滚动错位问题

在Layui项目开发过程中，使用Table组件时经常会遇到右键菜单在滚动容器中错位的问题。本文将深入分析这一问题的成因，并提供完整的解决方案。

问题现象分析

当Table被嵌套在多层具有滚动属性的容器中时，右键点击表格行弹出的上下文菜单会出现位置偏移。这种现象特别容易出现在以下布局结构中：

<div style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;height:300px">
  <div style="position: absolute; top: 2px; left: 2px; z-index: auto; overflow: auto; right:0;bottom:0">
    <div style="position: absolute;left: 0;right: 0;top: 80px;bottom: 0;overflow:auto;">
      <table class="layui-hide" id="ID-table-onrowContextmenu"></table>
    </div>
  </div>
</div>

技术原理探究

问题的根本原因在于Layui默认的位置计算机制无法正确处理多层滚动容器中的元素定位。当页面或容器发生滚动时，右键菜单的位置不会随之更新，导致视觉上的错位。

解决方案实现

使用Popper.js重写定位逻辑

我们可以通过引入Popper.js库来替代Layui原有的定位机制，实现更精确的元素定位。以下是完整的实现代码：

// 重写lay.position函数
lay.position = function (triggerEl, contentEl, options) {
  if (contentEl.__popperInstance__) return;
  
  // 规范化配置选项
  var clickType = lay.isTopElem(triggerEl) ? 'right' : (options.clickType || 'left');
  var offset = options.offset || [0, 5];
  var position = options.position || 'absolute';
  var eventObject = options.e || window.event || {};
  var placement = {
    left: 'bottom-start',
    right: 'bottom-end',
    center: 'bottom'
  }[options.align || 'left'];

  var popperOptions = {
    placement: placement,
    strategy: position,
    modifiers: [
      {
        name: 'offset',
        options: { offset: offset }
      },
      {
        name: 'computeStyles',
        options: { gpuAcceleration: false }
      }
    ],
  }

  if (clickType === 'right') {
    var e = eventObject;
    var virtualElement = {
      getBoundingClientRect: function () {
        var ctxElRect = e.target.getBoundingClientRect();

        if (!e._relativeOffset) {
          e._relativeOffset = {
            x: e.clientX - ctxElRect.left,
            y: e.clientY - ctxElRect.top
          };
        }

        return {
          width: 0,
          height: 0,
          left: e._relativeOffset.x + ctxElRect.left,
          top: e._relativeOffset.y + ctxElRect.top,
          right: e._relativeOffset.x + ctxElRect.left,
          bottom: e._relativeOffset.y + ctxElRect.top,
        }
      },
      contextElement: e.target
    };
    contentEl.__popperInstance__ = Popper.createPopper(virtualElement, contentEl, popperOptions);
  } else {
    contentEl.__popperInstance__ = Popper.createPopper(triggerEl, contentEl, popperOptions);
  }

  // 添加点击外部关闭监听
  var stop = lay.onClickOutside(contentEl, function () {
    contentEl.__popperInstance__.destroy();
    contentEl.__popperInstance__ = null;
    stop();
  }, { ignore: clickType === 'right' ? undefined : [triggerEl] });
}

配套CSS样式

[data-popper-reference-hidden] {
  visibility: hidden;
  pointer-events: none;
}

[data-popper-reference-hidden] .layui-menu>li {
  transition-duration: 0s;
}

关键点说明

1. 虚拟元素处理：对于右键菜单场景，我们创建了一个虚拟元素来代表点击位置，而不是直接使用触发元素。

2. 相对位置计算：通过记录点击位置相对于目标元素的偏移量，确保在滚动时能正确计算菜单位置。

3. 性能优化：关闭了GPU加速以避免动画问题，同时只在必要时创建Popper实例。

4. 事件处理：正确处理了点击外部关闭菜单的场景，避免内存泄漏。

实际应用建议

1. 将此代码作为公共模块引入，确保在Layui核心库之后加载。

2. 对于复杂的布局结构，建议测试不同滚动场景下的菜单位置表现。

3. 在生产环境中，建议对Popper.js进行按需加载，以优化页面性能。

通过以上方案，开发者可以彻底解决Layui Table组件在复杂滚动容器中的右键菜单位置问题，提升用户体验。