vue数组循环表单并进⾏相应的校验废话不多说，直接上代码
<template>
<div>
<div v-for="(item,index) in formData" :key="index">
<div class="left">
//划重点：:ref="'item'+index"
<el-form :model="item" :rules="rules" :ref="'item'+index" class="nameBox">
<el-form-item prop="name">
<el-input type="type" v-model="item.name" />
</el-form-item>vue逗号分割的字符串转数组
</el-form>
</div>
</div>
<el-button type="primary" @click="save">Save</el-button>
</div>
<template>
<script>
export default {
data() {
return {
formData: [{name:""}],
rules:{
name:[{message:"请输⼊",required: true, trigger: "blur"}]
},
}
},
methods: {
save() {
let This = this;
let allValidate = [];
this.formData.forEach((item,index) => {
//有多个输⼊框需校验，待都校验成功后再进⾏别的操作，所以需要使⽤Promise
allValidate.push(new Promise((rev,rej)=>{
/
/划重点：This.$refs['item'+index][0]
This.$refs['item'+index][0].validate((valid) => {
if(valid){rev()}else{rej()}
})
}))
});
Promise.all(allValidate).then(()=>{
//所有输⼊框都校验成功后的处理
}).catch(()=>{});
},
}
}
</script>
声明：此博客为个⼈学习之⽤，如与其他作品雷同，纯属巧合，并请明⽰指出

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。