Vue ElementUi動態表單(多個表單) 的校驗及提交

懇求sf的管理大大，不讓駁回個人文章了，我是把文章的好多註釋直接寫到代碼裏邊了，並非文章過短

前言

有這麼一個需求， 根據登陸用戶的權限，頁面上會動態顯示幾個表單,是的，獨立的幾個表單(就是有這樣的需求)。
這些動態的表單呢，樣式都同樣，都須要作校驗，而且提交的時候， 只能提交有權限且驗證經過的表單
線上demo: http://an888.net/sf/checkform/#/
github: https://github.com/Mrblackant...
效果如圖：

思路

1.擁有所有的權限的用戶會展現，ABC三個表單，因此咱們先用v-for將三個表單渲染出來;
2.根據登陸用戶的權限，咱們在初始化的時候，控制ABC哪些表單顯示，demo裏我用用戶小明和小紅作演示;
3.模擬用戶切換的時候，要將表單重置;
4.提交的時候，咱們只校驗有權限的表單，只提交校驗經過的數據;
5.利用new peomise以及Promise.all方法同時對幾個表單校驗;
我感受理解邏輯仍是要結合着代碼，因此我把註釋寫的很具體，這5個思路在代碼註釋裏都有體現，有問題看註釋就能明白

代碼

<template>
  <div class="hello">
    <!-- 模擬 用戶選擇 -->
    <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;" @change="userChange(tabPosition)">
      <el-radio-button label="xm">用戶：小明</el-radio-button>
      <el-radio-button label="xh">用戶：小紅</el-radio-button>
    </el-radio-group>
    <!-- form card -->
      <el-card class="box-card" v-for="(item,index) in makeData" :key="item.index" v-if="item.formShow">
      <div slot="header" class="clearfix"><span>{{item.formName}}</span></div>
         <el-form  :inline="true" :ref="item.formRef" :model="item.formModel" class="demo-form-inline">
            <el-form-item label="審批人" prop='user' :rules="[{ required: true, message: '審批人不能爲空'}]">
               <el-input v-model="item.formModel.user" placeholder="審批人"></el-input>
            </el-form-item>
             <el-form-item label="區域" prop='region' :rules="[{ required: true, message: '區域不能爲空'}]">
               <el-input v-model="item.formModel.region" placeholder="審批人"></el-input>
            </el-form-item>

        </el-form>
</el-card>
<!-- 提交 -->
<el-row type="flex" justify="center">
  <el-button type="primary" plain @click="enterForm">提交</el-button>
</el-row>
  </div>
</template>

<script>
export default {
  mounted(){
    this.userChange('xm')//模擬登陸的是小明
  },
  data () {
    return {
     makeData:[{
       formRef:'formFirst',//表單ref
       formModel:{user:'',region:''},//表單model
       formShow:'',//表單是否顯示的控制
       formName:'表單A'//表單標題
      },{
      formRef:'formSecond',
       formModel:{user:'',region:''},
       formShow:'',
       formName:'表單B'

      },{
        formRef:'formThird',
       formModel:{user:'',region:''},
       formShow:'',
       formName:'表單C'

      }],
      xm:[true,true,true],//用戶小明的權限
      xh:[true,true,false],//用戶小紅的權限
      tabPosition:'xm'//選擇用戶
     
        }
  },
  methods:{
  
  enterForm(){//動態表單提交
    console.log(this.$refs.formFirst)

let  arrForm=[]//哪些表單須要作校驗
let  arrModel=[]//表單的值
let  newArr = [] //承接promise的返回結果
let _self=this
this.makeData.forEach((item,index)=>{//將有權限的表單作校驗等等
  if (item.formShow) {
      checkForm(item.formRef)//校驗
      arrModel.push(item.formModel)//須要校驗的表單的值
  }
})

 function checkForm(arrName) { //根據form表單的ref，動態生成promise，再對其坐表單校驗，都經過了再去作處理
      var result = new Promise(function(resolve, reject) {
          _self.$refs[arrName][0].validate((valid) => {
              if (valid) {
                  resolve();
              } else { reject() }
          })
      })
      newArr.push(result) //push 獲得promise的結果
}

Promise.all(newArr).then(function() { //都經過了
      console.log(arrModel)
      alert('恭喜，表單所有驗證經過')
    }).catch(function() {
        console.log("err");
    });
  },
  userChange(val){//當前登陸用戶的change
    this.makeData.map((item,index)=>{//根據用戶的權限決定顯示哪些表單
      var c=item.formRef
      if (this.$refs[c]&&this.$refs[c][0]) { this.$refs[c][0].resetFields()}//模擬切換用戶時，將表單置空
      return item.formShow=this[val][index]
    })
  }
  }
}
</script>

<style scoped>
.box-card{
  margin-bottom:30px;
}
</style>