el-form动态表单props正确写法，如何使用 validateField
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="ID" v-show="!isAdd">
{{ form.typeId }}
</el-form-item>
<el-form-item
label="名称"
prop="typeName"
:rule="[
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
]"
>
<el-row>
<el-col :span="17">
<el-input v-model="form.typeName" minlength="1" :disabled="typeNameDisabled"></el-input>
</el-col>
<el-col :span="1"> </el-col>
<el-col :span="6">
<el-button type="text" icon="el-icon-edit" v-show="typeNameDisabled" @click="typeNameDisabled = false"
>修改</el-button
>
<el-button type="primary" size="small" v-show="!typeNameDisabled" @click="handleSaveMetadataType"
>保存</el-button
>
<el-button size="small" v-show="!typeNameDisabled" @click="typeNameDisabled = true">取消</el-button>
</el-col>
</el-row>
</el-form-item>
<template v-for="(item, index) in form.metadataList">
<el-row :key="index">
<el-col :span="8">
<el-form-item
:prop="'metadataList.' + index + '.id'"
:rules="{
required: true,
message: '请输入该字典名称',
trigger: 'blur',
}"
>
<el-input v-model="item.id" placeholder="请输入该字典名称" :disabled="item.disabled"></el-input>
</el-form-item>
</el-col>
<el-col :span="1"> </el-col>
<el-col :span="8">
<el-form-item
:prop="'metadataList.' + index + '.name'"
:rules="{
required: true,
message: '请输入该字典名称',
trigger: 'blur',
}"
>
<el-input v-model="item.name" placeholder="请输入该字典名称" :disabled="item.disabled"></el-input>
</el-form-item>
</el-col>
<el-col :span="1"> </el-col>
<el-col :span="6">
<el-button
type="text"
icon="el-icon-edit"
@click="form.metadataList[index].disabled = false"
v-show="item.disabled"
>修改</el-button
>
<el-button type="text" icon="el-icon-delete" @click="delDictData(index)" v-show="item.disabled"
>删除</el-button
>
<el-button type="primary" size="small" @click="saveDictData(index)" v-show="!item.disabled"
>保存</el-button
>
<el-button size="small" @click="form.metadataList[index].disabled = true" v-show="!item.disabled"
>取消</el-button
>
</el-col>
</el-row>
</template>
<el-form-item v-show="!isAdd">
<el-button style="width:100%" @click="addDictData">
<i class="el-icon-plus"></i>
添加字典</el-button
>
</el-form-item>
</el-form>
// 新增or修改字典种类
handleSaveMetadataType() {
this.$refs.form.validateField('typeName', (error) => {
if (!error) {
this.isAdd ? this.addMetadataType() : this.editMetadataType()
} else {
console.log('校验失败!!')
return false
}
})
},
// 保存修改的字典单元数据
saveDictData(index) {
this.$refs.form.validateField([`metadataList.${index}.id`, `metadataList.${index}.name`], (error) => {
debugger
if (!error) {
debugger
} else {
console.log('校验失败!!')
return false
}
})
},
注意上面表单是动态添加的！！！！
部分表单校验时注意对应props的写法。调用方法时要把对应index 或 传入整个对象、再根据数组中找到对应对象再精准修改！
this.$refs.form.validateField([`metadataList.${index}.id`, `metadataList.${index}.name`], (error) => {
if (!error) {
} else {
}
})