當我們在做后臺管理系統時，經常會遇到非常復雜的表單：

方案1： 在一個 vue 文件中

所有的表單項顯示隱藏、驗證、數據獲取、提交、自定義等邏輯放在一起

v-if/v-showelementui

缺點

方案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.$refs["indexForm"] .validate() .then(res => { // 父表單驗證成功后，驗證子表單 return this.$refs[templateType].vaildate(); }) .then(res => { // 全部驗證通過 // 獲取整體數據 const reqData = { // 獲取子組件數據 ...this.$refs[templateType].getData(), ...this.indexForm }; // 獲取當前表單類型的提交函數，并提交 this.typeSubmitMap[this.indexForm.type](reqData); }) .catch(err => { console.log(err); });},