vue中使用element進行多表單驗證實踐

  最近接到一個需求：根據后端返回的一個一維數組，在前端實現可多列效果，並且可展示、可編輯、可保存。話不多說，上圖

 

  圖001：

 

 

  圖002：

    圖003：

    圖004：

 

------------------------------------華麗的分割線--------------------------------------------

    這篇博文主要想談一談多表單驗證的事兒：上代碼！

    //提交表單
    async submit() {
      //多表單啟動驗證，這里有四個表單
      let formNameList = ["form0", "form1", "form2", "form3"];
      var result = true;
      for (let index = 0; index < formNameList.length; index++) {
        await this.$refs[formNameList[index]][0].validate(e => {
          result = e;
        });
        if (!result) break;
      }
      if (!result) {
        return;
      } else {
        //保存表單
        this.saveMapping();
      }
    },

 

       以上使用的是async await寫法，完成多個表單的校驗，this.$refs[formNameList[index]][0]中的[0]，一定切記，不然會報錯（樓主也是找了挺久的原因，才發現的。。。）

      代碼解析：1.使用for循環，沒用forEach的原因是，for循環可以用break，某種程度上來說性能更好。

                    2.一旦發現必填項有沒填寫的，立即跳出循環，走到return那一行，結束方法，頁面上會有提示，詳見圖004。

                    3.保存業務代碼【this.saveMapping();】，涉及到service的調用，這是相對獨立的部分，有必要封裝成獨立方法，解耦。

 

---------------------------------樓主的絮叨---------------------------------

    今天還挺高產的，O(∩_∩)O哈哈哈~寫了兩篇博文~刻意練之，其實樓主本是沒有寫作習慣的，希望2020年，養成一個好習慣，加油↖(^ω^)↗