Vue3父子組件表單滾動(dòng)到校驗(yàn)錯(cuò)誤的位置實(shí)現(xiàn)過(guò)程

更新時(shí)間：2025年07月30日 09:00:38 作者：滿

文章介紹了如何在包含父表單和多個(gè)子表單的場(chǎng)景中,通過(guò)滾動(dòng)方法實(shí)現(xiàn)提交時(shí)的校驗(yàn)機(jī)制,確保數(shù)據(jù)完整性與用戶操作體驗(yàn)

Vue3父子組件表單滾動(dòng)到校驗(yàn)錯(cuò)誤的位置

表單包括父表單、多個(gè)子表單

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

滾動(dòng)方法

const scrollToFirstError = (formRef) => {
  // 獲取第一個(gè)帶有錯(cuò)誤信息的表單字段
  const firstErrorField = document.querySelector('.el-form-item.is-error');
  if (firstErrorField) {
    // 平滑滾動(dòng)到該字段
    firstErrorField.scrollIntoView({
      behavior: 'smooth',
      block: 'center',
    });
  }
};

提交時(shí)校驗(yàn)

// 定義子組件ref
const childFormRefs = ref([]);
const setChildRef = (el) => {
  if (el) {
    childFormRefs.value.push(el);
  }
};

const projectInfoRef = ref();
const vForm = ref();


//提交方法里校驗(yàn)
//validateProjectForm子組件提供的校驗(yàn)方法
 let projectValid = projectInfoRef.value
      ? await projectInfoRef.value.validateProjectForm()  
      : { isValid: true };

    // 校驗(yàn)所有子表單
//validateForm子組件提供的校驗(yàn)方法
    const childValids = await Promise.all(childFormRefs.value.map((child) => child.validateForm()));

    // // 檢查子表單校驗(yàn)結(jié)果
    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); //校驗(yàn)不通過(guò)，滾動(dòng)到第一個(gè)表單錯(cuò)誤位置
    } else if (invalidForms.length > 0) {
      const firstInvalidIndex = childValids.findIndex((result) => !result.isValid);
      scrollToFirstError(childFormRefs.value[firstInvalidIndex]);  //校驗(yàn)不通過(guò)，滾動(dòng)到多個(gè)子表單第一個(gè)錯(cuò)誤位置
    } else if (!formValid) {
      scrollToFirstError(instance.proxy.$refs.vForm);
    }
    if (!projectValid?.isValid || invalidForms.length > 0 || !formValid) {
      return;
    }