【element ui动态prop校验未生效问题】-2022-07-27_:prop 检验失败

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>
1
2
3
4
5
6
7
8
9
10

• 失效原因：
  只是动态修改了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' }] : []">
1