Jeecg Boot项目中BasicTable多选框显示异常的解决方案

问题背景

在Jeecg Boot项目3.7.1版本中，使用BasicTable组件时，当分页数量超过50条且切换表格样式为"宽松"或"紧凑"模式时，会出现多选框部分缺失的显示异常问题。这个问题影响了用户在多选操作时的体验，特别是在处理大量数据时。

问题分析

该问题的根本原因在于表格行高的计算逻辑存在缺陷。当表格样式切换时，组件未能正确重新计算行高，导致虚拟滚动区域的多选框位置计算错误。具体表现为：

1. 在默认样式下工作正常
2. 切换到宽松或紧凑样式后出现多选框缺失
3. 问题在分页数量较大（超过50条）时尤为明显

解决方案

项目团队通过修改useCustomSelection.tsx文件中的相关逻辑解决了这个问题。主要修改点包括：

1. 添加了对表格size属性的显式监听，确保在样式变化时触发重新计算
2. 使用nextTick确保DOM更新完成后再获取行高
3. 优化了行高计算的时机和准确性

技术实现细节

在src/components/Table/src/hooks/useCustomSelection.tsx文件中，关键的修改如下：

watchEffect(() => {
    // 显式监听size变化
    propsRef.value.size && void 0;
    
    if (bodyEl.value) {
      // 监听div高度变化
      bodyResizeObserver = new ResizeObserver((entries) => {
        for (let entry of entries) {
          if (entry.target === bodyEl.value && entry.contentRect) {
            const { height } = entry.contentRect;
            bodyHeight.value = Math.ceil(height);
          }
        }
      });
      bodyResizeObserver.observe(bodyEl.value);
      const el = bodyEl.value?.querySelector('tbody.ant-table-tbody tr.ant-table-row') as HTMLDivElement;
      if (el) {
        // 使用nextTick确保DOM更新完成
        nextTick(() => {
          rowHeight.value = el.offsetHeight;
        });
        return;
      }
    }
    rowHeight.value = 50;
});

问题预防

为了避免类似问题的发生，开发者在处理表格相关组件时应注意：

1. 对于可能影响布局的属性变化，应设置显式的监听
2. 涉及DOM操作的逻辑应考虑使用nextTick确保DOM更新完成
3. 虚拟滚动场景下，行高的计算需要特别精确
4. 样式切换时应全面测试各种数据量的情况

总结

Jeecg Boot团队通过细致的分析和精准的修改，解决了BasicTable在多选场景下的显示异常问题。这个案例展示了在复杂前端组件开发中，对细节的关注和正确的生命周期处理的重要性。开发者在使用类似组件时，可以参考这个解决方案来优化自己的实现。