解决Ant Design表格嵌套时列宽不同步问题

问题背景

在使用Ant Design的Table组件时，开发者经常会遇到需要嵌套表格的场景。当主表格和嵌套表格同时存在时，一个常见的问题是两者的列宽无法自动同步对齐，这会导致界面显示不协调，影响用户体验。

问题现象

在嵌套表格结构中，即使主表格和嵌套表格设置了相同的列配置，它们的列宽仍然会出现不一致的情况。特别是在嵌套表格不显示表头(showHeader=false)时，这种列宽不同步的问题尤为明显。

技术分析

Ant Design的Table组件在渲染时会根据内容自动计算列宽。对于嵌套表格，由于它们被视为独立的表格实例，各自的列宽计算逻辑互不影响，因此容易出现宽度不一致的情况。

解决方案

方法一：强制显示嵌套表格表头

通过设置嵌套表格的showHeader={true}属性，可以触发表格的完整渲染流程，使得列宽计算更加准确，从而与主表格保持同步。

<Table
  columns={columns}
  dataSource={data}
  expandable={{
    expandedRowRender: (record) => (
      <Table
        columns={columns}
        dataSource={data}
        showHeader={true}
        pagination={false}
      />
    ),
  }}
/>

方法二：手动同步列宽

另一种更灵活的方法是手动同步列宽。可以通过获取主表格的列宽信息，然后动态应用到嵌套表格上：

const [columnWidths, setColumnWidths] = useState([]);

const handleMainTableResize = (widths) => {
  setColumnWidths(widths);
};

// 在主表格上
<Table
  columns={columns}
  onHeaderRow={() => ({
    onResize: handleMainTableResize
  })}
/>

// 在嵌套表格上
<Table
  columns={columns.map((col, index) => ({
    ...col,
    width: columnWidths[index]
  }))}
/>

最佳实践建议

1. 对于简单场景，优先使用方法一的显示表头方案
2. 对于复杂场景或需要精确控制列宽时，推荐使用方法二的手动同步方案
3. 考虑使用CSS样式覆盖的方式统一设置列宽
4. 在性能敏感场景下，注意列宽同步操作可能带来的重渲染问题

总结

Ant Design表格嵌套时的列宽同步问题是一个常见的UI挑战。通过理解表格组件的渲染机制，开发者可以选择最适合项目需求的解决方案。无论是简单的显示表头方案，还是更灵活的手动同步方案，都能有效解决列宽不同步的问题，提升应用的整体视觉效果和用户体验。