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

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

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;
    }
相关推荐
资深前端之路几秒前
react 面试题 react 有什么特点?
前端·react.js·面试·前端框架
aaaweiaaaaaa1 分钟前
HTML和CSS学习
前端·css·学习·html
秋秋小事7 分钟前
React Hooks useContext
前端·javascript·react.js
Jinuss9 分钟前
Vue3源码reactivity响应式篇之reactive响应式对象的track与trigger
前端·vue3
striver_#11 分钟前
百度前端社招面经二
前端
xcnn_11 分钟前
前端入门——案例一:登录界面设计(html+css+js)
前端·css·html
ST.J12 分钟前
前端笔记2025
前端·javascript·css·vue.js·笔记
拉不动的猪13 分钟前
回顾vue中的Props与Attrs
前端·javascript·面试
Jerry1 小时前
使用 Material 3 在 Compose 中设置主题
前端
耶啵奶膘1 小时前
uni-app头像叠加显示
开发语言·javascript·uni-app