Table 组件错行问题原因及解决方案

[yangchch6]

Table 组件错行问题总结

Table 表格若出现错行问题，大致分为以下几种情况：

1. 单元格内容过多，超出一行

场景描述

当单元格内容过多，折行显示时，出现固定列和非固定列错行现象。

问题分析

给 Table 设置了 bodyDisplayInRow={false}，并且自定义了行高 height 属性，导致行高不一致。

解决方案

[email protected]+ 版本，在组件内部对 height 属性做了处理，在设置 bodyDisplayInRow = {false} 的情况下，height 不会生效，从组件层面解决了错行问题。

2. 表体滚动条计算出现误差

场景描述

初始化渲染表格时，父容器刚好放得下Table组件，但表体仍出现横向滚动条，导致滚动条滚动到表体底部时，出现行错位问题。

问题分析

domWidthDiff 变量计算问题，表体出现多余滚动条，导致错行。

解决方案

表格滚动条是根据容器宽度和列宽之和比较计算的，出现这种情况，需要检查项目是否设置了额外的 border 样式，导致 computeTableWidth 计算出现误差，产生错位。设置边框可使用 Table 的 bordered 属性。

3. 表头滚动条显示错误

场景描述

表格有数据时，表头出现多余滚动条，导致表体内容下沉，出现行错位。

问题分析

表格渲染方式不同，导致 scrollbarWidth 计算出现问题，未能正常隐藏表头滚动条，导致表格错行
此类问题主要调试 lib/utils 目录中的 measureScrollbar 方法

解决方案

如果是因为渲染时找不到className 为 u-table 的 DOM 元素导致，需要将滚动条样式添加到 body 上，附上代码：

    export function measureScrollbar(direction = 'vertical') {
    
      if (typeof document === 'undefined' || typeof window === 'undefined') {
        return 0;
      }
      // 修改此处：
      let currentDom = document.body;
    
      if (scrollbarSize) {
        return scrollbarSize;
      }
      const scrollDiv = document.createElement('div');
      Object.keys(scrollbarMeasure).forEach(scrollProp => {
        scrollDiv.style[scrollProp] = scrollbarMeasure[scrollProp];
      });
      currentDom.appendChild(scrollDiv);
      let size = 0;
      if (direction === 'vertical') {
        size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
      } else if (direction === 'horizontal') {
        size = scrollDiv.offsetHeight - scrollDiv.clientHeight;
      }
    
      currentDom.removeChild(scrollDiv);
      scrollbarSize = size;
      return scrollbarSize;
    }

4. 嵌套子表格场景，扩展行和固定列高度不一致

场景描述

嵌套子表格场景，若不给扩展行的内容设置高度，则会出现主表扩展行和固定列高度不一致问题。

问题分析

Table 内部需要动态获取扩展行的高度，并同步到左右固定列对应的行上去。

解决方案

[email protected]+ 版本，支持扩展行的自适应高度，在不设置高度的情况下，避免了错行问题。

在 componentDidUpdate 方法中，完成固定列的高度同步，关键点在于动态获取扩展行的实际占位高度：

const expandedRows = this.bodyTable.querySelectorAll(`.${clsPrefix}-expanded-row`) || [];
const fixedColumnsExpandedRowsHeight = {};
expandedRows.length > 0 && expandedRows.forEach(row => {
  let parentRowKey = row && row.previousSibling && row.previousSibling.getAttribute("data-row-key"),
      height = row && row.getBoundingClientRect().height || 'auto';
  fixedColumnsExpandedRowsHeight[parentRowKey] = height;
})