Semi Design Table组件默认展开分组行与展开行键冲突问题解析

Semi Design是一个由字节跳动前端团队开发的企业级UI组件库，提供了丰富的React组件。其中Table表格组件功能强大，支持分组展示、行展开等高级功能。本文将深入分析Table组件中defaultExpandAllGroupRows与expandedRowKeys属性同时使用时的一个典型问题。

问题现象

在Semi Design的Table组件中，当同时设置以下两个属性时会出现预期不符的情况：

1. defaultExpandAllGroupRows - 用于默认展开所有分组行
2. expandedRowKeys - 用于控制特定行的展开状态

开发者期望的行为是：所有分组行默认展开，同时特定行保持展开状态。但实际运行中，expandedRowKeys指定的行展开状态未能生效。

技术背景

Table组件的分组功能通过groupBy属性实现，可以将数据按照指定字段分组展示。defaultExpandAllGroupRows属性控制是否默认展开所有分组行，而expandedRowKeys则用于精确控制哪些行应该展开。

这两个属性本应协同工作，但在实现上存在优先级问题。组件内部的状态管理机制在处理这两个属性时出现了逻辑冲突。

问题根源

经过分析，问题的根本原因在于：

1. 组件初始化时，defaultExpandAllGroupRows会触发所有分组行的展开
2. 但随后expandedRowKeys尝试设置特定行的展开状态时，被分组行的展开状态覆盖
3. 状态更新机制没有正确处理这两个属性的优先级关系

解决方案

Semi Design团队在v2.54.0-beta.0版本中修复了这个问题。修复方案主要包含以下改进：

1. 调整状态更新顺序，确保expandedRowKeys的优先级高于defaultExpandAllGroupRows
2. 优化内部状态管理逻辑，避免属性间的相互覆盖
3. 完善文档说明，明确这两个属性的使用场景和优先级

最佳实践

在使用Table组件的分组和展开功能时，建议：

1. 如果只需要控制分组行的展开状态，使用defaultExpandAllGroupRows即可
2. 如果需要同时控制分组行和普通行的展开状态，确保使用最新版本的Semi Design
3. 复杂场景下，考虑使用受控模式，通过onExpandChange回调函数手动管理展开状态

总结

Semi Design作为企业级UI组件库，持续优化组件的稳定性和功能完整性。这次Table组件展开状态的修复，体现了团队对细节的关注和对开发者体验的重视。开发者在使用时应注意版本更新，及时获取最新的功能改进和问题修复。