ElementUI-Table

为什么 Table 组件复杂

表格组件往往同时承担数据展示、交互控制和性能优化三件事。ElementUI Table 看起来只是一个组件，内部其实处理了列管理、滚动同步、固定列、排序、筛选和选择态等大量逻辑。

核心结构

• Table：整体容器，负责状态分发和布局协调。
• TableColumn：列配置收集器，描述每一列的渲染规则。
• Store：集中维护排序、筛选、选中项和展开行等状态。
• Layout：计算列宽、表头高度、滚动条占位和 fixed 区域。

典型难点

• 固定列本质上是额外渲染了一份表格，需要同步滚动和高度。
• 大数据量表格会因为 DOM 太多导致卡顿。
• 单元格自定义渲染过多时，更新成本会快速上升。

优化建议

• 避免一次性渲染过多行，必要时接入虚拟列表。
• 列定义尽量稳定，减少频繁销毁重建。
• 自定义单元格优先做纯展示，重逻辑放到外层预处理。
• 固定列数量尽量少，否则滚动同步成本明显上升。

实战结论

表格组件真正难的不是“画出来”，而是“在复杂交互和大量数据下仍然稳定”。理解内部状态流和布局机制后，二次封装会容易很多。