循环中使用el-form

循环中使用el-form 主要是校验问题
el-table 的数据 :data=“ruleForm.tableData”
:prop=“‘tableData.’ + $index + ‘.name’” :rules=“rules.name”

<el-button type="primary" @click="addNewData">新增项目</el-button>
    <el-form :model="ruleForm" ref="ruleFormRef" :rules="rules">
      <el-table :data="ruleForm.tableData">
        <el-table-column lable="name">
          <template #default="{ row, $index }">
            <el-form-item :prop="'tableData.' + $index + '.name'" :rules="rules.name">
              <el-input v-model="row.name"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column lable="min">
          <template #default="{ row, $index }">
            <el-form-item :prop="'tableData.' + $index + '.min'" :rules="rules.min">
              <el-input v-model="row.min"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column lable="max">
          <template #default="{ row, $index }">
            <el-form-item :prop="'tableData.' + $index + '.max'" :rules="rules.max">
              <el-input v-model="row.max"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row, $index }">
            <el-button link @click="confirm(row, $index, ruleFormRef)">确定</el-button>
            <el-button link @click="ruleForm.tableData.splice($index, 1)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <el-button type="primary" @click="submit(ruleFormRef)"> 提交</el-button>

import type { FormInstance } from 'element-plus';
import { reactive, ref } from 'vue';
interface ruleForm {
  tableData: [{ name: String, min: String, max: String, status: Boolean }]
}
const ruleFormRef: any = ref<FormInstance>()
const ruleForm: any = reactive<ruleForm>({
  tableData: [{ name: '', min: '', max: '', status: false }]
})
const rules: any = reactive({
  name: [{ required: true, message: '必填项', trigger: 'blur' }],
  min: [{ required: true, message: '必填项', trigger: 'blur' }],
  max: [{ required: true, message: '必填项', trigger: 'blur' }]
})

// 单行验证

const confirm = async (row: any, index: number, formEl: FormInstance | undefined) => {
  const { isEdit, ...partial } = row;
  const props = Object.keys(partial).map(item => `tableData.${index}.${item}`);
  await formEl?.validateField(props, async (valid: any) => {
    if (valid) {
      // 验证通过，
    } else {
      // 验证不通过
    }
  })
}

// 总体验证提交

const submit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      // 验证通过，
    } else {
      // 验证不通过
    }
  })
}