Vue ElementUI复杂表单验证与数据提交方案如何优化处理？

本文共计1208个文字，预计阅读时间需要5分钟。

在后台管理系统开发过程中，经常会遇到复杂的表格：表格项众多，不同表格类型下显示不同表格项；某些条件下，某些表格项会关闭验证；每个表格项还有其他自定义逻辑。

当我们在做后台管理系统时，经常会遇到非常复杂的表单：

• 表单项非常多
• 在各种表单类型下，显示不同的表单项
• 在某些条件下，某些表单项会关闭验证
• 每个表单项还会有其他自定义逻辑，比如输入框可以插入模板变量、输入字符数量显示、图片上传并显示、富文本 。。。
• 在这种错综复杂的情况下，完成表单的验证和提交
• 可以查看具体例子：例子中省略了很多琐碎的功能，只保留整体的复杂表单框架，用于展示解决方案

方案1： 在一个vue 文件中

所有的表单项显示隐藏、验证、数据获取、提交、自定义等逻辑放在一起

v-if/v-show elementui

缺点

• 乱
• 乱
• 还是乱
• 一个vue 文件，轻轻松松上2000 行
• 在我尝试加入一种新的表单类型时，我发现我已经无。从。下。手。

方案2：分离组件

其实很容易想到根据不同的表单类型，分离出多个相应类型的子表单 。