element ui动态prop校验未生效问题
- 需求：prop使用三元表达式赋值，实现动态验证，满足条件时才校验
- 动态校验失效：
<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>
- 失效原因：
只是动态修改了prop属性，而并未触发表单的重新渲染，验证器中的prop属性并未更新，还是初次渲染时的空值
如果使用v-if根据form.type切换两个el-item结果仍是不生效，因为vue的diff算法，在diff算法中会尽可能的复用组件，所以此处看上根据form.type进行切换，但实际上diff算法会复用组件，并没有重新渲染，所以需要配合key属性。 - 所以最终解决方案：
1、在el-item中加上:key=“form.type”,dom元素会根据key值的不同重新渲染，从而更新检验
2、或者动态更新校验规则rule
<el-form-item :key="form.type" :prop="form.type=== 2 ? 'templateId' : ''" :rules="form.type=== 2 ? [{ required: true, message: '请输入模板', trigger: 'blur' }] : []">
文章来源地址https://www.toymoban.com/news/detail-618717.html
文章来源：https://www.toymoban.com/news/detail-618717.html
到了这里，关于【element ui动态prop校验未生效问题】-2022-07-27的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
