vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3父子组件表单滚动到校验错误的位置

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

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文