<template>
<div class="driverPermit">
<div v-for="(item,index) in datas.realForm" :key="index">
<el-form ref="form" :model="datas" label-width="160px" :rules="rules">
<el-form-item label="名字" :rules="rules.name" :prop="`realForm.${index}.name`">
<el-input v-model="item.name" placeholder="名字"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="item.age" placeholder="年龄"></el-input>
</el-form-item>
<el-form-item>
<el-button @click="submit(index)">保存</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
data(){
return {
datas:{
realForm:[
{
name:'aaaa',
age:12,
},
{
name:'bbb',
age:11,
},
]
},
rules:{
name:[{required: true, message: '请输入名字', trigger: 'blur' }]
}
}
},
methods:{
submit(index){
this.$refs.form[index].validate((valid)=>{
if(valid){
alert('提交成功')
}
})
}
}
}
</script>
显示结果
点击第一个提交按钮不可以提交,第二个提交按钮提交成功