vue3form循环校验
setup(props,{expose}) {
const addFormRef = ref<FormInstance>({}); // 灰度抽屉组件ref
}
const handleValidate = (key) => {
return new Promise((resolve, reject) => {
addFormRef?.value[key].validate(async (valid: any, fields: any) => {
if (valid) {
resolve(true)
} else {
resolve(false)
return
}
})
})
}
expose({
handleValidate
})
{
formConfig.value?.[props.type]?.map((itemModel, index) => {
return (<ElCard class={`${className(style['add-card-comp'])} relative mb-[20px]`} key={itemModel.key}>
<ElForm class="w-[720px]" model={itemModel} ref={
(el) => { if (el) addFormRef.value[itemModel.key] = el }
}>
<ElFormItem label="优先级序号">
<span>{index + 1}</span>
</ElFormItem>
</ElForm>
}
Js中调用校验
formEl.validate(async (valid) => {
if (valid) {
const ValidateArr = []
enumParams.forEach(item => {
if (formConfig.value[item].length > 0) {
formConfig.value[item].forEach(i => {
if (item === 'boardListJson') {
ValidateArr.push((boardListJsonRef?.value as any)?.handleValidate(i.key))
}
})
}
})
if (ValidateArr.length > 0) {
const res: Array<boolean> = await Promise.all(ValidateArr)
if (res.includes(false)) {
ElMessage({
message: '请检查后提交',
type: 'error'
})
return
}
}
})