vue element-ui 表单循环验证

根据纯数组循环出n个el-form-item，表单中的表单项都是动态加载的；

第一种：比如value = [1,2,3,4,5,6,7]这种数组循环出表单；

<template>
  <div class="hello">
    <!-- 
      @param {Object}  model-需要验证的对象. 
      @param {Array}  ruleForm-验证规则. 
    -->
    <el-form  ref="ruleForm" label-width="100px" class="demo-ruleForm" :model="formValue">
      <el-form-item :label="`${index}月目标值`" v-for="(item, index) in 6" :key="index"
        :prop="`value.${index}`"
        :rules="ruleForm" 
      >
        <el-input v-model="formValue.value[index]"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      formValue:{
        value: []
      },
      ruleForm: [
        {required: true, message: '必填项', trigger: 'blur'},
      ]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  width: 400px
}
</style>

第二种情况：比如下面这种json数组。
value: [ { name: '' "},]

<template>
  <div class="hello">
    <!-- 
      @param {Object}  model-需要验证的对象. 
      @param {Array}  ruleForm-验证规则. 
    -->
    <el-form  ref="ruleForm" label-width="100px" class="demo-ruleForm" :model="formValue">
        <!-- 这里需要注意的是，:value.’ value    的index，再加上‘.name

原因是，表单验证时它需要去找到具体的某一个表单项，一旦prop写错，是无法达到验证效果的。 -->
      <el-form-item label="活动名称" v-for="(item, index) in 6" :key="index"
        :prop="`value.${index}.name`"
        :rules="ruleForm" 
      >
        <el-input v-model="formValue.value"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      formValue:{
        value: [
            {
                name: ''
            },          
        ]
      },
      ruleForm: [
        {required: true, message: '必填项', trigger: 'blur'},
      ]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  width: 400px
}
</style>