方案1： 在一个vue文件中
所有的表单项显示隐藏、验证、数据获取、提交、自定义等逻辑放在一起

根据表单类型，使用v-if/v-show处理表单项显示隐藏
在elementui自定义验证中，根据表单类型，判断表单项是否验证
根据表单类型，获取不同的数据，并提交到不同的接口
其余所有的自定义逻辑

缺点

乱
乱
还是乱
一个vue文件，轻轻松松上2000行
在我尝试加入一种新的表单类型时，我发现我已经无。从。下。手。
方案2：分离组件
其实很容易想到根据不同的表单类型，分离出多个相应类型的子表单。但我在实践时还是遇到了很多问题：父子表单验证、整体提交数据的获取等等，并总结出一套解决方案：

1. 子组件
   所有的子组件中都需要包含两个方法validate、getData供父组件调用。
   (1) validate方法
   用于验证本身组件的表单项，并返回一个promise对象
   vaildate() {
   // 返回elementUI表单验证的结果（为promise对象）
   return this.$refs[“ruleForm”].validate();
   },

复制代码
(2) getData方法
提供子组件中的数据
getData() {
// 返回子组件的form
return this.ruleForm;
},
复制代码
2. 父组件
(1) 策略模式
使用策略模式存储并获取子表单的ref(用于获取子表单的方法)和提交函数 。省略了大量的if-else判断。
data:{
// type和ref名称的映射
typeRefMap: {
1: “message”,
2: “mail”,
3: “apppush”
},
// type和提交函数的映射。不同类型，接口可能不同
typeSubmitMap: {
1: data => alert(短信模板创建成功${JSON.stringify(data)}),
2: data => alert(邮件模板创建成功${JSON.stringify(data)}),
3: data => alert(push模板创建成功${JSON.stringify(data)})
},
}
复制代码
(2) submit方法
用于父子组件表单验证、获取整体数据、调用当前类型提交函数提交数据

因为elementUI表单验证的validate方法可以返回promise结果，可以利用promise的特性来处理父子表单的验证。
比如then函数可以返回另一个promise对象、catch可以获取它以上所有then的reject、Promise.all。

父表单验证通过才会验证子表单，存在先后顺序
// 父表单验证通过才会验证子表单，存在先后顺序
submitForm() {
const templateType = this.typeRefMap[this.indexForm.type];
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … return this.refs[templateType].vaildate();
})
.then(res => {
// 全部验证通过
// 获取整体数据
const reqData = {
// 获取子组件数据
…this.$refs[templateType].getData(),
…this.indexForm
};
// 获取当前表单类型的提交函数，并提交
this.typeSubmitMapthis.indexForm.type;
})
.catch(err => {
console.log(err);
});
},
复制代码

父表单，子表单一起验证
submitForm1() {
const templateType = this.typeRefMap[this.indexForm.type];
const validate1 = this.$refs["indexForm"].validate();constvalidate2=this.$refs[templateType].vaildate();
// 父子表单一起验证
Promise.all([validate1, validate2])
.then(res => {
// 都通过时，发送请求
const reqData = {
…this.$refs[templateType].getData(),
…this.indexForm
};
this.typeSubmitMapthis.indexForm.type;
})
.catch(err => {
console.log(err);
});
},

作者：漓漾li
链接：https://juejin.cn/post/6844903873363214343
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。