v-if 导致 elementui 表单校验失效问题解决

问题

在使用 elementui 表单的过程中,某些表单项需要通过 v-if 来判断是否展示,但是这些表单项出现了检验失效的问题。

解决方法

1、给需要 v-if 判断的表单项添加 key 值

html 复制代码
<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 上

html 复制代码
<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 判断的表单项中如果存在相同字段的项就会导致重复校验的问题,所以这种方法需要在判断的表单项字段都不相同的情况下使用。

html 复制代码
<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、使用自定义校验规则

html 复制代码
<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>
javascript 复制代码
const checkName = (rule, value, callback) => {
	if (!value) {
       return callback(new Error('名称不能为空'));
   }
}

data(){
	return{
		rules: {
   			name: [
            	{ validator: checkName , trigger: 'change' }
          	],
        }
	}
}
相关推荐
浮桥3 分钟前
vue3实现pdf文件预览 - vue-pdf-embed
前端·vue.js·pdf
AA-代码批发V哥12 分钟前
Vue框架之钩子函数详解
vue.js
七夜zippoe15 分钟前
前端开发中的难题及解决方案
前端·问题
四季豆豆豆38 分钟前
博客项目 laravel vue mysql 第四章 分类功能
vue.js·mysql·laravel
Hockor1 小时前
用 Kimi K2 写前端是一种什么体验?还支持 Claude Code 接入?
前端
杨进军1 小时前
React 实现 useMemo
前端·react.js·前端框架
海底火旺1 小时前
浏览器渲染全过程解析
前端·javascript·浏览器
你听得到111 小时前
揭秘Flutter图片编辑器核心技术:从状态驱动架构到高保真图像处理
android·前端·flutter
驴肉板烧凤梨牛肉堡1 小时前
浏览器是否支持webp图像的判断
前端
Xi-Xu1 小时前
隆重介绍 Xget for Chrome:您的终极下载加速器
前端·网络·chrome·经验分享·github