vue3 循环生成表单的校验

229 阅读1分钟
<div v-for="(item, index) in dataList" :key="index">    
    <el-form ref="formRefs" :model="item" :rules="rules">    
    </el-form>
</div>

const dataList = [{ id: 'no1', name: '前端秀'}]
const formRefs = ref([])
// 验证所有form表单
const validate = (refs) => {   
    const promises = refs.map((form, index) => form.validate());  
    return Promise.all(promises); 
};
// 验证规则
const rules = {
     name: [{ required: true, message: '请输入name', trigger: 'blur' }]
}
// 提交验证
const submit = async() => {
    const  rule = await validate(formRefs.value);
    if(!rule){
        return false;
    }else{
        cosnole.log('pass')
    }
}