Vue element 动态添加表单验证

效果如下：

代码如下：

<template>
  <div >
    <el-button type="primary" @click="onSubmit">动态点击添加</el-button>
    <el-form :inline="true" ref="ruleForm" :model="formInline" class="demo-form-inline" >
<!--  {labelCheckoutPerson:"审批人:", checkPerson:"",checkoutPlaceholderInfo:"请输入审批人",
       labelActivityArea:"活动区域:", area:"",areaPlaceholderInfo}    -->
      <el-col :span="24" style="margin-top: 15px" v-for="(item,index) in formInline.arrayExample" :key="index">
        <el-form-item :label="item.labelCheckoutPerson" :prop="'arrayExample.'+index+'.checkPerson'" :rules="[{ required: true, message: item.checkoutPlaceholderInfo, trigger: 'blur' },]">
          <el-input v-model="item.checkPerson" :placeholder="item.checkoutPlaceholderInfo"></el-input>
        </el-form-item>
        <el-form-item :label="item.labelActivityArea" :prop="'arrayExample.'+index+'.area'" :rules="[{ required: true, message: item.areaPlaceholderInfo, trigger: 'blur' },]">
          <el-input v-model="item.area" :placeholder="item.areaPlaceholderInfo"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        </el-form-item>
      </el-col>

    </el-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        formInline: {
          arrayExample:[],
        }
      }
    },
    methods: {
      onSubmit() {
        this.formInline.arrayExample.push({labelCheckoutPerson:"审批人:", checkPerson:"",checkoutPlaceholderInfo:"请输入审批人",labelActivityArea:"活动区域:", area:"",areaPlaceholderInfo:"请输入活动区域"})
      },
      submitForm(formName) {
        console.log('this.formInline',this.formInline)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    },
  }

</script>

重点是下边的内容格式一定要对应上