el-form表单在循环里如何写rules表单校验,解决办法
在日常开发中我们经常可以遇到 在form中 循环嵌套多个的情况 比如点击加减新增删除 并且还需要校验表单如何写呢?
实现办法
1.html (举例)
contractFeesForm 为总数据源 <el-form :model="contractFeesForm" ref="contractFeesFormRef" :rules>这里的rules需动态生成
<div v-for="(contractItem, contractIndex) in contractFeesForm.payment"><el-divider></el-divider><el-row :gutter="24"><el-col :span="8">这里 我们既然是在循环内 在每个item上绑定的 prop 就不能是固定写死的 不然没办法进行表单校验 就需要写成 xxxx[0,1,2......].属性值这样的 index 为动态的<el-form-item :prop="`payment[${contractIndex}].payment_type`" label="名称"><el-selectv-model="contractItem.payment_type"filterableclearableplaceholder="请选择"><el-option v-for="v in paymentList" :label="v.name" :value="v.id" /></el-select></el-form-item></el-col><el-col :span="8">这个地方也同理 对应该el-select的数据源<el-form-item :prop="`payment[${contractIndex}].payment_unit`" label="名称"><el-select v-model="contractItem.payment_unit" filterable clearable placeholder="请选择"><el-option v-for="v in paymentunitList" :label="v.name" :value="v.id" /></el-select></el-form-item></el-col><el-col :span="8">这个地方也同理 对一个该el-select的数据源<el-form-item :prop="`payment[${contractIndex}].payment_mode`" label="名称"><el-select v-model="contractItem.payment_mode" filterable clearable placeholder="请选择"><el-option v-for="v in paymentmodeList" :label="v.name" :value="v.id" /></el-select></el-form-item></el-col></el-row></div>
2.js
// 动态生成校验规则
const rules = ref()
//rules方法封装
const generateFieldRules = (fields: string[], message: string) => {
//fields 为 payment[1,2,3...].xxx
//message 为 提示校验的内容return fields.reduce((acc, field) => {acc[field] = [{ required: true, message, trigger: 'blur' }]return acc},{} as Record<string, any>)
}
const updateRules = () => {const newRules: Record<string, any> = {}//我们获取payment这个数组并进行forEach 循环 主要是获取 index 和 字段名拼接contractFeesForm.value.payment.forEach((_, index) => {const paymentFields = [ // 这里的字段就是需要校验的字段'payment_type','payment_unit','payment_mode'... ]//使用Object.assign进行对象拼接拷贝Object.assign(newRules,//在这里调用上面封装好的rules方法将对应的 field 和 index 拼接进去generateFieldRules(paymentFields.map((field) => `payment[${index}].${field}`),'请输入'))})//校验赋值rules.value = { ...newRules }
}
// 初始更新校验规则
updateRules()
3,然后我们在确认校验操作逻辑里
const contractFeesFormRef = ref<FormInstance | null>(null)
contractFeesFormRef.value.validate(async (valid: boolean) => {if (valid) { .... // 即可
