第一种方式：
<el-form :model="item" v-for="(item,index) in arr" :key='index'>
<el-form-item label="name" prop="name" :rules="rules.name" >
<el-input v-model="item.name"></el-input>
</el-form-item>
<el-form-item label="name1" prop="age" :rules="rules.age" >
<el-input v-model="item.age"></el-input>
</el-form-item>
<el-form-item label="name2" prop="num" :rules="rules.num" >
<el-input v-model="item.num"></el-input>
</el-form-item>
<div v-for="(item01,index) in item.list" :key="index">
<el-form-item label="name" :prop="`list[${index}].s`" :rules="{ required: true, message: 'Required', trigger: 'blur' }">
<el-input placeholder="name" v-model="item01.s"></el-input>
</el-form-item>
</div>
</el-form>
第二种方式：在嵌套一个el-form
<el-form :model="item" v-for="(item,index) in arr" :key='index'>
<el-form-item label="name" prop="name" :rules="dailyUseRecordRules.name" >
<el-input v-model="item.name"></el-input>
</el-form-item>
<el-form-item label="name1" prop="age" :rules="dailyUseRecordRules.age" >
<el-input v-model="item.age"></el-input>
</el-form-item>
<el-form-item label="name2" prop="num" :rules="dailyUseRecordRules.num" >
<el-input v-model="item.num"></el-input>
</el-form-item>
<!-- 嵌套的<el-form> -->
<el-form :model="item01" v-for="(item01,index) in item.list" :key="index">
<el-form-item label="name" prop="s" :rules="{ required: true, message: 'Required', trigger: 'blur' }">
<el-input placeholder="name" v-model="item01.s"></el-input>
</el-form-item>
</el-form>
</el-form>
在使用vue element-ui form表单渲染的时候，会遇到这样的数据结构：
<script type="text/ecmascript-6">
export default {
data() {
return {
arr:[ {
name:'',
age:'',
num:'',
list:[ {
s:'',
p:'',
h:''
} ]
} ],
rules:{
name:[
{ required: true, message: '请输入供应商名称', trigger: 'blur' },
],
age:[
{ required: true, message: '请输入供应商名称', trigger: 'blur' },
],
num:[
{ required: true, message: '请输入供应商名称', trigger: 'blur' },
],
}
}
},
}
</script>