Vue通用表单解决方案：挑战、重构与自定义实现

本文主要探讨了基于Vue的通用表单解决方案——el-form-renderer的使用体验和面临的挑战，以及作者团队如何为其定制和改进的过程。作者首先提到在项目中频繁遇到关于表单修改和功能需求的讨论，这促使他重新审视现有的表单解决方案。 半年前，引入el-form-renderer极大地简化了表单开发，只需通过简单的JSON配置即可创建出功能完备的表单。然而，随着时间的推移，这个组件暴露出了不少问题，比如维护不足，不能满足团队对于特定表单渲染规则的需求。因此，团队决定fork了一份，并在此基础上创建了自己的版本——@femessage/el-form-renderer，专注于提供一套定制化的表单渲染规则，旨在提升开发效率和用户体验。 文章通过3W分析（What、Why、How）来阐述他们所做的事情： 1. **What**：el-form-renderer是一个基于Element-UI封装的表单渲染器，它不仅仅局限于Element-UI或单一的表单功能，而是服务于广泛的表单和操作场景，致力于减少开发者在重复CRUD任务中的工作量。 2. **Why**：团队需要表单渲染器的原因有两个层次。一是为了提高开发效率，从繁琐的表单操作中解脱出来；二是希望通过el-form-renderer实现“让天下没有难做的表单”的目标。在实际项目中，它已经成功解决了大部分表单需求。 3. **How**：尽管el-form-renderer起初利用Element-UI的专业性取得了初步成功，但团队发现其在表单联动和事件、slot处理方面存在不足。这促使他们深入思考如何改进，以满足更高层次的需求，即“下层基础决定上层建筑”。 作者强调了在开发过程中，他们没有选择从头开始，而是选择了“让专业的人做专业的事”，利用已有的成熟组件库（如Element-UI）作为基础，然后针对关键问题进行定制和优化，如表单联动和事件管理。通过这样的策略，团队希望能打造一个更加完善且符合自身需求的通用表单解决方案。