JeecgBoot中BasicTable列表横向滚动与合计行同步问题解析

问题背景

在JeecgBoot项目开发过程中，使用BasicTable组件时发现了一个关于表格横向滚动与合计行同步的问题。当表格设置了canResize属性为true时，如果表格列数较多出现横向滚动条，用户横向滚动表格内容时，下方的合计行不会跟随滚动，导致数据显示不同步。

问题分析

该问题主要出现在JeecgBoot的3.5.x、3.6.x和3.7.x版本中。通过分析源代码，发现问题出在useTableFooter.ts文件中处理表格合计行滚动的逻辑上。

在原始实现中，代码通过监听.ant-table-content元素的滚动事件来实现合计行与主体内容的同步滚动。但当canResize属性启用时，表格的DOM结构发生了变化，滚动容器变成了.ant-table-body元素，导致原有的事件监听失效。

解决方案

开发团队已经修复了这个问题，解决方案的核心是根据canResize属性的值动态选择正确的滚动容器：

1. 当canResize为true时，监听.ant-table-body元素的滚动事件
2. 当canResize为false时，保持原有逻辑监听.ant-table-content元素

修复代码中还添加了setTimeout确保DOM完全渲染后再进行事件绑定，提高了代码的稳定性。

技术实现细节

在useTableFooter.ts文件中，主要修改了handleSummary函数的实现：

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);
  });
}

总结

这个问题的解决展示了前端开发中DOM结构变化对功能实现的影响，以及如何通过动态选择元素和适当的事件监听来解决这类问题。对于使用JeecgBoot的开发人员来说，了解这一修复可以帮助他们在遇到类似问题时快速定位和解决。

该修复将在JeecgBoot的下一个版本中发布，当前遇到此问题的开发者可以按照上述方案手动修改本地代码以临时解决问题。