根据纯数组循环出n个el-form-item,表单中的表单项都是动态加载的;
第一种:比如value = [1,2,3,4,5,6,7]这种数组循环出表单;
![9320442-015ce1add2993b9f.png](https://i-blog.csdnimg.cn/blog_migrate/c19f23a675672b784a7e1ce2e9922ded.png)
image.png
<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>