2.4 2.13：element 模块拆分与五大组件重构

2025-10-24 的 2.13.0，动的是 layui 里资历最老的模块之一：element。同时五大组件集体重构，lay 工具方法补上了树形数据处理的老缺口。这一篇把 2.13 看透。

element 拆分：从大杂烩到职责单一

element 在老版本里的角色很微妙：tab、导航、面包屑、进度条、折叠面板全塞在一个模块里，堪称组件界的大杂烩。当年这样打包有历史原因——快速搭建页面时一次引入全部就位，确实省事。但代价也显而易见：模块职责模糊，按需加载不彻底，维护上牵一发而动全身。

2.13.0 把 element 拆分为 tab、nav、breadcrumb、progress、collapse 五个组件模块。这一步是架构意义上的拨乱反正：每个模块只管自己的事，按需引入变得名副其实，组件的演进节奏也不再被同一个模块绑架。

老用户最关心的问题当然是：老代码会不会炸？答案是基本不会。官方明确原接口保留兼容，你原来怎么用 element，现在还可以怎么用，业务不受影响。唯一的例外是 element 内的 tab 功能，它已经被 2.10 的全新 tabs 正式平替，新项目理应直接用 tabs。所以这次拆分对存量项目是平滑过渡，对新技术选型则是清晰的路标。

element 拆分映射表

把老模块的能力与新组件模块一一对应，迁移时就有了地图：

拆分之后，原接口保留兼容是过渡期的保护伞，但我的建议依旧是：新代码按新模块写，老代码在迭代窗口里逐步换血，把兼容层当作缓冲垫而非永久依赖。兼容层存在的意义是让迁移可以按节奏进行，而不是让人永远不用迁移。

五大重构组件：各自补强的一步

2.13.0 同时重构了 carousel、colorpicker、flow、transfer、tree 五个组件。它们的升级方向，我逐个用一句话概括，具体细节以官方更新日志为准：

值得一提的是，这五大重构与此前 rate、slider 用 component 重构一脉相承：组件范式统一化不是一次性运动，而是按批次推进的长期工程。2.13 这一批完成后，layui 老组件里最需要翻修的几座大山基本翻完，剩下的存量组件按这个节奏推进只是时间问题。

lay 新增 treeToFlat 与 flatToTree：树形数据的互转利器

2.13.0 还在 lay 工具方法里新增了 treeToFlat 与 flatToTree，前者把树形结构压平成扁平数组，后者把扁平数组组装成树形结构，lay.extend 的实现也一并做了重构增强。

这两个方法的实用场景，做过中后台的都懂。后端接口最常见的返回是带父节点标识的扁平列表，而 tree 这类组件要的是嵌套树形结构，于是几乎每个项目里都长着一份自己手写的递归转换函数：风格各异、边界处理参差、换个项目又得重写一遍。现在官方直接给了标准答案：

• flatToTree：接口返回扁平列表，一转即得树组件可用的结构，再也不用手写递归。
• treeToFlat：反向场景同样顺手，编辑树之后压平提交给后端，数据往返天然对称。
• 双向都有官方实现，意味着前后端的数据契约可以放心按扁平结构设计，展示层转换交给 lay。

数据转换看似小事，但它是树类需求里重复劳动最多的一环。官方收编之后，这类代码从业务仓库里消失了，这是一件值得高兴的事。

小结

2.13.0 的主题词是拆与立：拆掉 element 大杂烩，立起五个职责单一的组件模块；重构五大老组件，立稳统一组件范式的又一批成果；再配上树扁平滑互转这样的实用工具，这一版为后续迭代腾出的空间相当可观。至此，2.10 以来的高频迭代形成了完整闭环。