最近在用vue3写table校验，下面是示意图，需求是在提交时对table中的每个输入框都校验，完成后，才能提交表单

1.先自定义table内容，用element-plus框架,在每个输入框都添加ref值，在做校验的时候，可以或许相同开头字母的ref,来进行多表单校验。

<el-table-column prop="destination" label="*目的地" align="center" width="150">
  <template #default="scope">
    <el-form :ref="`formRef${scope.$index}destination`" :model="scope.row" :validate-on-rule-change="true">
      <el-form-item label="" prop="destination" :rules="[
      { required: true, message: '请输入目的地', trigger: 'blur' }]">
        <el-input :disabled="isDisable" :model-value="scope.row.destination" placeholder="请输入目的地" @input="
          (value) => handleInputChange(value, scope.$index, 'destination')
        "></el-input>
      </el-form-item>
    </el-form>
  </template>
 </el-table-column>

2.在el-table中定义的是:ref="formRef${scope.$index}destination"，其中destination是prop="destination"，保持一致。 3.那如何获取table中的所有ref呢，vue3中通过 getCurrentInstance 方法获取当前组件实例，const context = getCurrentInstance(); const { refs } = context;其中refs就能拿到当前组件的所有的ref值，然后截取出开头为formRef的值，核心是const formEl = refs[key] as FormInstance，不然.validate获取不到，会报错。 需要注意的是，在初写vue3时会犯的错： element-plus中的校验：

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

需求中的多表单校验：

const resultArr: Promise<any>[] = []//用来接受返回结果的数组
  for (let key in refs) {
    if (key.substring(0, 7) == 'formRef') {
      const formEl = refs[key] as FormInstance
      const task = new Promise((resolve, reject) => {
        formEl.validate((valid, fields) => {
          if (valid) {
            resolve(valid)
          } else {
            reject(fields)
          }
        })
      })
      resultArr.push(task)
    }
  }

4.在校验多表单时，需要用promise.all,全部表单校验结束，才能提交。 全部代码如下：