当我们在做后台管理系统时,经常会遇到非常复杂的表单:
表单项非常多
在各种表单类型下,显示不同的表单项
在某些条件下,某些表单项会关闭验证
每个表单项还会有其他自定义逻辑,比如 输入框可以插入模板变量、输入字符数量显示、图片上传并显示、富文本 。。。
在这种错综复杂的情况下,完成表单的验证和提交
可以查看具体例子:例子中省略了很多琐碎的功能,只保留整体的复杂表单框架,用于展示解决方案
方案1: 在一个 vue 文件中
所有的表单项显示隐藏、验证、数据获取、提交、自定义等逻辑放在一起
v-if/v-show
elementui
缺点
乱
乱
还是乱
一个 vue 文件,轻轻松松上 2000 行
在我尝试加入一种新的表单类型时,我发现我已经无。从。下。手。
方案2:分离组件
其实很容易想到 根据不同的表单类型,分离出多个相应类型的子表单 。但我在实践时还是遇到了很多问题: 父子表单验证、整体提交数据的获取 等等,并总结出一套解决方案:
1. 子组件
所有的子组件中都需要包含两个方法 validate 、 getData 供父组件调用。
(1) validate 方法
用于验证本身组件的表单项,并返回一个 promise 对象
vaildate() {
// 返回`elementUI`表单验证的结果(为`promise`对象)
return this.$refs[&#