Vue3父子组件表单滚动到校验错误的位置实现过程
作者:滿
文章介绍了如何在包含父表单和多个子表单的场景中,通过滚动方法实现提交时的校验机制,确保数据完整性与用户操作体验
Vue3父子组件表单滚动到校验错误的位置
表单包括父表单、多个子表单
<div class="scollContainer"> <div class="container"> <ProjectInfo ref="projectInfoRef" v-model="formData" :form-rules="rules"></ProjectInfo> <div class="content" style="position: relative"> <group-title>子债信息</group-title> <div v-if="!detailFlag" style="position: absolute; top: 8px; right: 10px"> <el-button type="primary" @click="addChildBond">添加</el-button> <el-button v-if="formData.mdmDcmSubStructurizeInfoList.length > 1" @click="delChildBond" >删除</el-button > </div> <div> <group-title>子债信息</group-title> <childBondInfo v-for="(item, index) in formData.mdmDcmSubStructurizeInfoList" :ref="setChildRef" :key="index" v-model="formData.mdmDcmSubStructurizeInfoList[index]" :form-rules="rules" :index="index" :is-involve-clause="formData.isInvolveInvestorProtectionClause" ></childBondInfo> </div> </div> </div> </div>
滚动方法
const scrollToFirstError = (formRef) => { // 获取第一个带有错误信息的表单字段 const firstErrorField = document.querySelector('.el-form-item.is-error'); if (firstErrorField) { // 平滑滚动到该字段 firstErrorField.scrollIntoView({ behavior: 'smooth', block: 'center', }); } };
提交时校验
// 定义子组件ref const childFormRefs = ref([]); const setChildRef = (el) => { if (el) { childFormRefs.value.push(el); } }; const projectInfoRef = ref(); const vForm = ref(); //提交方法里校验 //validateProjectForm子组件提供的校验方法 let projectValid = projectInfoRef.value ? await projectInfoRef.value.validateProjectForm() : { isValid: true }; // 校验所有子表单 //validateForm子组件提供的校验方法 const childValids = await Promise.all(childFormRefs.value.map((child) => child.validateForm())); // // 检查子表单校验结果 const invalidForms = childValids.filter((result) => !result.isValid); const formValid = await instance.proxy.$refs.vForm.validate((valid) => { return valid; }); console.log(projectValid.isValid, 'kkk'); if (!projectValid?.isValid) { scrollToFirstError(projectInfoRef.value); //校验不通过,滚动到第一个表单错误位置 } else if (invalidForms.length > 0) { const firstInvalidIndex = childValids.findIndex((result) => !result.isValid); scrollToFirstError(childFormRefs.value[firstInvalidIndex]); //校验不通过,滚动到多个子表单第一个错误位置 } else if (!formValid) { scrollToFirstError(instance.proxy.$refs.vForm); } if (!projectValid?.isValid || invalidForms.length > 0 || !formValid) { return; }
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。