快捷導(dǎo)航

v-if 導(dǎo)致 elementui 表單校驗(yàn)失效問題解決方案

更新時(shí)間：2024年01月26日 15:15:09 作者：Jiang_JY

在使用 elementui 表單的過程中,某些表單項(xiàng)需要通過 v-if 來判斷是否展示,但是這些表單項(xiàng)出現(xiàn)了檢驗(yàn)失效的問題,今天小編給大家介紹v-if 導(dǎo)致 elementui 表單校驗(yàn)失效問題解決方案,感興趣的朋友一起看看吧

問題

在使用 elementui 表單的過程中，某些表單項(xiàng)需要通過 v-if 來判斷是否展示，但是這些表單項(xiàng)出現(xiàn)了檢驗(yàn)失效的問題。

解決方法

1、給需要 v-if 判斷的表單項(xiàng)添加 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、將校驗(yàn)規(guī)則直接綁定在 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 判斷的表單項(xiàng)中如果存在相同字段的項(xiàng)就會導(dǎo)致重復(fù)校驗(yàn)的問題，所以這種方法需要在判斷的表單項(xiàng)字段都不相同的情況下使用。

<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、使用自定義校驗(yàn)規(guī)則

<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' }
          	],
        }
	}
}

到此這篇關(guān)于v-if 導(dǎo)致 elementui 表單校驗(yàn)失效問題解決的文章就介紹到這了,更多相關(guān)elementui 表單校驗(yàn)失效內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: