问题:在el-form表单校验中,有些表单项是通过v-if控制显示与隐藏,在切换的时候就会出现校验错乱的情况。
解决方法:在v-if控制显示的表单项上增加key属性
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="130px"
class="demo-ruleForm"
>
<el-form-item label="特殊资源" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio label="1">线上品牌商赞助</el-radio>
<el-radio label="2">线下场地免费</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
label="线下品牌商名称"
prop="brandName"
key="brandName"
v-if="ruleForm.resource === '1'"
>
<el-input
v-model="ruleForm.brandName"
placeholder="请输入线上品牌商名称"
></el-input>
</el-form-item>
<el-form-item
label="线下场地名称"
prop="venueName"
key="venueName"
v-if="ruleForm.resource === '2'"
>
<el-input
v-model="ruleForm.venueName"
placeholder="请输入线下场地名称"
></el-input>
</el-form-item>
</el-form>