element ui動態(tài)prop校驗未生效問題
- 需求：prop使用三元表達式賦值，實現(xiàn)動態(tài)驗證，滿足條件時才校驗
- 動態(tài)校驗失效：
<el-form-item :prop="form.type=== 2 ? 'templateId' : ''">
<el-select v-model="form.templateId" placeholder="請選擇模板">
<el-option
v-for="item in templateList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
- 失效原因：
只是動態(tài)修改了prop屬性，而并未觸發(fā)表單的重新渲染，驗證器中的prop屬性并未更新，還是初次渲染時的空值
如果使用v-if根據(jù)form.type切換兩個el-item結(jié)果仍是不生效，因為vue的diff算法，在diff算法中會盡可能的復(fù)用組件，所以此處看上根據(jù)form.type進行切換，但實際上diff算法會復(fù)用組件，并沒有重新渲染，所以需要配合key屬性。 - 所以最終解決方案：
1、在el-item中加上:key=“form.type”,dom元素會根據(jù)key值的不同重新渲染，從而更新檢驗
2、或者動態(tài)更新校驗規(guī)則rule
<el-form-item :key="form.type" :prop="form.type=== 2 ? 'templateId' : ''" :rules="form.type=== 2 ? [{ required: true, message: '請輸入模板', trigger: 'blur' }] : []">
文章來源地址http://www.zghlxwxcb.cn/news/detail-618717.html
文章來源：http://www.zghlxwxcb.cn/news/detail-618717.html
到了這里，關(guān)于【element ui動態(tài)prop校驗未生效問題】-2022-07-27的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
