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 表单校验失效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue2响应式原理之Object.defineProperty()方法的使用
这篇文章主要介绍了vue2响应式原理之Object.defineProperty()方法的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
详解Vue路由开启keep-alive时的注意点
这篇文章主要介绍了详解Vue路由开启keep-alive时的注意点，非常具有实用价值，有兴趣的朋友可以了解一下
2017-06-06
el-form的label和表单自适应填满一行且靠左对齐方式
这篇文章主要介绍了el-form的label和表单自适应填满一行且靠左对齐方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
解决echarts 一条柱状图显示两个值,类似进度条的问题
这篇文章主要介绍了解决echarts 一条柱状图显示两个值,类似进度条的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
vue动态绑定background的方法
background是background-color,background-image,background-repeat,background-attachment,background-position,background-size等属性的缩写,本文我用动态绑定background-image来举例,感兴趣的朋友跟随小编一起看看吧
2023-10-10
react router零基础使用教程
React-Router 路由库，是官方维护的路由库，事实上也是唯一可选的路由库。它通过管理 URL，实现组件的切换和状态的变化，开发复杂的应用几乎肯定会用到
2022-09-09
element Table表格组件多字段(多列)排序方法
最近需要做个需求，需要做到element Table表格组件多字段(多列)排序，本文就详细的介绍一下方法，感兴趣的可以了解一下
2021-09-09
基于element-ui中el-select下拉框选项过多的优化方案
这篇文章主要介绍了基于element-ui中el-select下拉框选项过多的优化方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
Vue组件实现评论区功能
这篇文章主要为大家详细介绍了Vue组件实现评论区功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
vue3 element的Form表单用法实例
这篇文章主要为大家介绍了vue3中element的Form表单用法实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10