前言

项目开发过程中，遇到一种情况，需要动态加载多个表单，并且在提交时，需要对所有提交的表单进行校验。研究了一些文档，最终完成了需求。首页是动态表单渲染、添加以及删除

1 动态渲染组件

javascript">// 渲染表单列表
div class="form-list"><div class="form-item" v-for="(item, index) in formData.details" :key="index"><div class="item-form"><FormCom:ref="(el) => setBoxRef(el, index)":form-config="formConfig2"label-width="150px":form-rules="formRules2"/></div></div><!-- 添加按钮 --><div class="button-wrapper" @click="addItem"><el-icon style="margin-right: 12px;"><CirclePlus /></el-icon></div>
</div>

javascript"><script lang="ts" setup>
const baseParams = {... // 渲染的参数 }
const boxRefs:any = ref([])
const formData: any = reactive({
...// 其他参数details: [deepClone(baseParams )],
})
// 动态绑定ref
const setBoxRef = (el: any, index:number) => {if (el) {boxRefs.value[index] = el}
}
// 添加
function addItem () {formData.details.push(deepClone(baseParams ))
}
// 删除
function deleteItem (index:number) {formData.details.splice(index, 1)
}
</script>

2. 动态表单校验

实际场景中，我们需要在提交时对所有表单进行一次性校验，并给出校验信息，element的官网示例钟，对form表单的校验方法是

javascript">if (!formEl) returnawait formEl.validate((valid, fields) => {if (valid) {console.log('submit!')} else {console.log('error submit!', fields)}})

显然在这里，对动态表单而言是不行的，我们的表单是动态添加和删除的，我们前面已经可以获取到所有的动态表单组件了，但是你不能一个个去校验，这样在使用上体验感非常不好，所以需要集体校验，并给出结果。然后我想到了promise all,然后尝试处理了一下，就很好的解决了问题

javascript">// 校验所有表单
async function validateForm() {const { details } = formDataconst refList = []for (const index in details) {refList.push(checkForm(boxRefs.value[index]?.formRef))}Promise.all([checkForm(formRef.value?.formRef), ...refList]).then(() => {// 后续操作}).catch(() => {ElMessage.warning('请完善表单必填项')})
}
// 表单校验通用方法function checkForm (formRef) {return new Promise((resolve, reject) => {formRef?.validate((valid) => {if (valid) {resolve()} else {reject(new Error('错误'))}})})
}

最后，大功告成！！！写这篇博客纯粹也是想记录一下自己解决问题的过程和方法，如果能帮助到你，记得点赞+关注哦