父组件提交时让各自的子组件验证表格是否填写完整

项目场景：

提示：这里简述项目相关背景：

父组件中有三个表格，表格中时输入框，有些输入框是必填的，在父组件提交时需要验证这三个表格的必填输入框中是否有没填写的。

---

原因分析：

提示：这里填写问题的分析：

有两点：

1：表格的验证

表格外面套一个form表单，然后在表格的必填输入框的每一项中用表单的验证规则验证

2：多个子组件一起验证，只要一个验证没通过就不能提交

Promise.all([child1,child2,child3,]).then(res=>{}）

---

解决方案：

提示：这里填写该问题的具体解决方案：

1：父组件

1：html

<template>
    <!-- 第一个表格组件 -->
    <QuestionType 
    ref="child1"
    :disabled="disabled"
    :tableList="questionData.testList"
    :title="'型式试验'"
    />
    <!-- 第二个表格组件 -->
    <QuestionCar
    ref="child2"
    :disabled="disabled"
    :tableList="questionData.processList"
    />
    <!-- 第三个表格组件 -->
    <QuestionType
    ref="child3" 
    :disabled="disabled"
    :tableList="questionData.marketList"
    />
      <el-button  
        type="primary" 
        @click="submitForm()">提交</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
</template>

2：ts

// 提交输入的表格
const child1=ref();//获取子组件的表格的实例
const child2=ref();
const child3=ref();
const submitForm=(status:number)=>{
  let res1= child1.value.form.validate()
  let res2= child2.value.form.validate()
  let res3= child3.value.form.validate()
  let res4= child4.value.form.validate()
  let promise=[res1,res2,res3,res4];
  Promise.all(promise).then(res=>{
    //返回的是个数组，验证不通过的是返回false，验证通过的返回是true
    if(res.indexOf('false')==-1){//如果所有的子组件返回的没有false
      YearPerformanceApi.editYearPerformance(questionData.value)
      .then(result=>{
        dialogVisible.value=false;
        loading.value = true;
        disabled.value=true;
      })
    }
  })
}

2：子组件的表格加验证规则

1：html

<el-form ref="form" :model="props">
      <el-table 
        ref="tableRef"
        :data="props.tableList" 
        :stripe="true" 
        :show-overflow-tooltip="true" 
        :border="true"
        :header-cell-style="{textAlign:'center'}"
        :cell-style="{textAlign:'center'}">
        <el-table-column type="selection" width="80" fixed="left" />
        <el-table-column 
          label="问题编号"
          min-width="160"
          prop="questionsCode">
          <template #header v-if="props.tableList.length>0">
            <div >
              <span style="color:red">*</span>问题编号
            </div>
          </template>
          <template #default="scope">
            <el-form-item 
              :prop="'tableList['+scope.$index+'].questionsCode'" 
              :rules="[
                { required: true, message: '请输入问题编号',trigger: 'blur', },
                { required: true, message: '请输入问题编号',trigger: 'change', }
              ]">
              <el-input 
                v-model="scope.row.questionsCode" 
                :disabled="props.disabled" placeholder="请输入"/>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
</el-form>

2：ts

//接收父组件传过来的值
const props = defineProps({
  disabled:{
    type:Boolean,
    default:true
  },
  tableList:{
    type:Array,
  },
})

原文地址：https://blog.csdn.net/m0_63026408/article/details/143862103

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！