Vue3 父子组件表单滚动到校验错误的位置实现方法

滿2025-07-05 7:02

表单包括父表单、多个子表单

html 复制代码

<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>

滚动方法

javascript 复制代码

const scrollToFirstError = (formRef) => {
  // 获取第一个带有错误信息的表单字段
  const firstErrorField = document.querySelector('.el-form-item.is-error');
  if (firstErrorField) {
    // 平滑滚动到该字段
    firstErrorField.scrollIntoView({
      behavior: 'smooth',
      block: 'center',
    });
  }
};

提交时校验

javascript 复制代码

// 定义子组件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;
    }