循环中使用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) returnawait formEl.validate(async (valid, fields) => {if (valid) {// 验证通过，} else {// 验证不通过}})
}