JeecgBoot项目中BasicTable组件合计行横向滚动问题解析与修复方案

问题背景

在JeecgBoot项目开发过程中，使用BasicTable组件时发现了一个影响用户体验的交互问题。当表格设置了canResize属性为true时，如果表格列数较多出现横向滚动条，用户滚动表格内容时，底部的合计行不会跟随横向滚动，导致数据显示错位。

问题现象分析

该问题主要出现在以下场景：

1. 表格列数较多，超出容器宽度，出现横向滚动条
2. 表格启用了canResize属性（允许列宽调整）
3. 表格同时启用了showSummary属性显示合计行

在这种情况下，用户横向滚动表格内容时，合计行保持不动，与上方数据列无法对齐，严重影响数据查看体验。

技术原理探究

通过分析源代码，我们发现问题的根源在于：

1. 当canResize为true时，表格的DOM结构与普通表格不同
2. 原有的滚动事件监听器绑定在了错误的DOM元素上
3. 合计行的滚动同步机制没有考虑canResize场景下的特殊结构

解决方案实现

项目团队通过修改useTableFooter.ts文件中的handleSummary方法解决了此问题。核心修复思路包括：

1. 区分canResize和非canResize两种场景，选择正确的DOM元素进行监听
2. 使用setTimeout确保DOM完全渲染后再进行操作
3. 在滚动事件中同步主表格和合计行的scrollLeft值

具体实现代码如下：

function handleSummary() {
  const { showSummary, canResize } = unref(propsRef);
  if (!showSummary || unref(getIsEmptyData)) return;
  
  nextTick(() => {
    const tableEl = unref(tableElRef);
    if (!tableEl) return;
    
    let bodyDom;
    if (canResize) {
      setTimeout(() => {
        bodyDom = tableEl.$el.querySelector('.ant-table-body');
      }, 0);
    } else {
      bodyDom = tableEl.$el.querySelector('.ant-table-content');
    }
    
    setTimeout(() => {
      useEventListener({
        el: bodyDom,
        name: 'scroll',
        listener: () => {
          const footerBodyDom = tableEl.$el.querySelector('.ant-table-footer .ant-table-content');
          if (!footerBodyDom || !bodyDom) return;
          footerBodyDom.scrollLeft = bodyDom.scrollLeft;
        },
        wait: 0,
        options: true,
      });
    }, 0);
  });
}

技术要点说明

1. DOM查询时机：使用setTimeout确保在DOM完全渲染后查询元素
2. 元素选择策略：根据canResize属性值选择不同的查询选择器
3. 事件同步机制：通过监听scroll事件，保持主表格和合计行的滚动位置同步
4. 性能优化：使用debounce技术避免频繁触发滚动事件

最佳实践建议

对于使用JeecgBoot的开发者，在处理类似表格交互问题时，建议：

1. 充分理解不同配置下表格的DOM结构差异
2. 注意异步操作对DOM查询的影响
3. 考虑使用ResizeObserver等现代API监测元素变化
4. 在复杂交互场景中，合理使用防抖和节流技术

总结

JeecgBoot团队通过深入分析问题根源，针对性地修改了表格合计行的滚动同步机制，完美解决了canResize场景下的横向滚动问题。这一修复不仅提升了用户体验，也为开发者处理类似交互问题提供了参考范例。该修复方案已纳入项目下一版本发布计划，开发者可以通过修改本地代码提前应用此修复。