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年，养成一个好习惯，加油↖(^ω^)↗