v-if 导致 elementui 表单校验失效问题解决方案
更新时间:2024年01月26日 15:15:09 作者:Jiang_JY
在使用 elementui 表单的过程中,某些表单项需要通过 v-if 来判断是否展示,但是这些表单项出现了检验失效的问题,今天小编给大家介绍v-if 导致 elementui 表单校验失效问题解决方案,感兴趣的朋友一起看看吧
问题
在使用 elementui 表单的过程中,某些表单项需要通过 v-if 来判断是否展示,但是这些表单项出现了检验失效的问题。
解决方法
1、给需要 v-if 判断的表单项添加 key 值
<el-form ref="form" :model="form"> <el-form-item :key="0" v-if="hasItem" label="名称" prop="type"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item :key="1" v-if="hasItem" label="类型" prop="type"> <el-input v-model="form.type"></el-input> </el-form-item> </el-form>
2、将校验规则直接绑定在 el-form-item 上
<el-form ref="form" :model="form"> <el-form-item :rules="{required: true, message:'请输入名称', trigger: 'change'}" v-if="hasItem" label="名称" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item :rules="{required: true, message:'请输入类型', trigger: 'change'}" v-if="hasItem" label="类型" prop="type"> <el-input v-model="form.type"></el-input> </el-form-item> </el-form>
3、v-show 代替 v-if
这种方法存在一个问题,就是如果 v-if 判断的表单项中如果存在相同字段的项就会导致重复校验的问题,所以这种方法需要在判断的表单项字段都不相同的情况下使用。
<el-form ref="form" :model="form"> <el-form-item v-show="hasItem" label="名称" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item v-show="hasItem" label="类型" prop="type"> <el-input v-model="form.type"></el-input> </el-form-item> </el-form>
4、使用自定义校验规则
<el-form ref="form" :model="form"> <el-form-item :key="0" v-if="hasItem" label="名称" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item :key="1" v-if="hasItem" label="类型" prop="type"> <el-input v-model="form.type"></el-input> </el-form-item> </el-form>
const checkName = (rule, value, callback) => { if (!value) { return callback(new Error('名称不能为空')); } } data(){ return{ rules: { name: [ { validator: checkName , trigger: 'change' } ], } } }
到此这篇关于v-if 导致 elementui 表单校验失效问题解决的文章就介绍到这了,更多相关elementui 表单校验失效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Vue3-KeepAlive,多个页面使用keepalive方式
这篇文章主要介绍了Vue3-KeepAlive,多个页面使用keepalive方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-08-08vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
这篇文章主要介绍了vue App.vue里的公共组件改变值触发其他组件或.vue页面监听,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
最新评论