需求:prop使用三元表达式赋值,实现动态验证,满足条件时触发校验
<el-form-item label="账号" :prop="formData.type === 1 ? 'account' : ''">
<el-input v-model.trim="formData.account" placeholder="请填写账号"></el-input>
</el-form-item>
上面代码只是动态修改了prop属性,未触发表单的重新渲染。
因为vue的diff算法会尽可能的复用组件,所以即使使用了v-if实际上diff算法仍会复用组件,并没有重新渲染,因此需要配合key属性。
有key时:
Diff算法可以通过唯一的标识key正确的识别此节点,插入需要更新的节点,复用key不变的节点。
<el-form-item label="账号" :key="formData.type" :prop="formData.type === 1 ? 'account' : ''">
<el-input v-model.trim="formData.account" placeholder="请填写账号"></el-input>
</el-form-item>