vue3父组件提交校验多个子组件

news2024/9/22 23:37:30

实现功能：在父组件提交事件中校验多个子组件中的form

父组件：

<script setup lang="ts">
    import {ref, reactive} from 'vue'
    import childForm from './childForm.vue'
    import childForm2 from './childForm2.vue'
    let approvalRef = ref()
    let approvalRef2 = ref()
    let resultArr= reactive([])//存放子组件的数组
    let errListMsg =ref("")//用来存储错误提示
    //这个方法是固定的，用来创建 Promise 实例，为多个组件校验使用
    const checkForm = (formChild) =>{
        let result = new Promise((resolve,reject)=>{
            formChild.validate((valid,fields)=>{
                if (valid) {
                    console.log('submit');
                    resolve()
                }else{
                    console.log('error');
                    Object.keys(fields).forEach((v,index)=>{
                        if (index==0) {
                            const PropName = fields[v][0].field
                            formChild.scrollToField(PropName)
                            errListMsg.value = fields[v][0].message
                        }
                    })
                    reject()
                }
            })
        })
        resultArr.push(result)
    }
    //提交按钮事件
    const taskFun = ()=>{
        //获取该子组件暴露出来的form 的 ref
        const approvalRefChild = approvalRef.value.forms
        const approvalRefChild2 = approvalRef2.value.ruleFormRef
        //调用上面创建好的方法
        checkForm(approvalRefChild)
        checkForm(approvalRefChild2)
        Promise.all(resultArr).then((results)=>{
            console.log('这里是接口请求');
            //校验通过
        }).catch(err=>{
            //校验不通过提示
            console.log(errListMsg.value);
            
        })
        resultArr=[]//每次请求完要清空数组
        errListMsg.value=""//提示也需要清空
    }
</script>
<template>
    <childForm ref="approvalRef"></childForm>
    <childForm2 ref="approvalRef2"></childForm2>
    <button @click="taskFun">提交</button>
</template>

子组件一：

这个是表格可以增删改的情况，对表格添加输入校验

<script setup lang="ts">
    import {ref, reactive} from 'vue'
    import type { FormInstance } from 'element-plus'
    const forms = ref<FormInstance>()
    let info:any = reactive({
        data:[{name:'1'}]
    })
    const formRules = reactive({
    name: [{ required: true, message: '请输入姓名', trigger: 'change' }],
    role: [{ required: true, message: '请选择', trigger: 'blur' }]
    })
    defineExpose({
        forms
    })
</script>
<template>
    <el-form :model="info" ref="forms">
        <el-table
        ref="tableRef"
        :data="info.data"
        border>
        <el-table-column align="center" property="name" label="*姓名">
            <template #default="{row,$index}">
                <el-form-item :prop="`data[${$index}].name`" :rules="formRules.name">
                    <el-input placeholder="请输入姓名" v-model="info.data[$index].name" />
                </el-form-item>
            </template>
        </el-table-column>
        <el-table-column align="center" property="role" label="角色">
            <template #default="{row,$index}">
                <el-form-item :prop="`data[${$index}].role`" :rules="formRules.role">
                    <el-input placeholder="请输角色" v-model="info.data[$index].role" />
                </el-form-item>
            </template>
        </el-table-column>
        </el-table>
    </el-form>
</template>

子组件二：

这个是普通的form表单情况

<template>
    第二个组件
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="Activity name" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
    </el-form>
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import type { FormInstance, FormRules } from 'element-plus'
  
  interface RuleForm {
    name: string
  }
  const formSize = ref('default')
  const ruleFormRef = ref<FormInstance>()
  const ruleForm = reactive<RuleForm>({
    name: 'Hello'
  })
  const rules = reactive<FormRules<RuleForm>>({
    name: [
      { required: true, message: '请输入Activity name', trigger: 'blur' },
      { min: 3, max: 5, message: '长度再3-5位', trigger: 'blur' },
    ]
  })
  defineExpose({ruleFormRef})
  </script>