我居然在同一个问题在了两次跟头!!!必须记录这个小细节!!!
背景:一个后台的表单校验,表单中需要单独绑定rules,跳转方式后面两个选项都使用的同一个el-form-item,意味着rules要动态生效
上代码:
这里只展示了页面路径/网页链接 这个 el-form-item,单独的绑定rules不生效,原因有可能就是,切换的时候,会重新渲染页面,重新绑定rules,但是页面没有变化,所以就不生效
<el-form-item prop="pathOrLink" :key="dialogForm.jumpType" v-if="dialogForm.jumpType" :label="dialogForm.jumpType == 1? '页面路径' : dialogForm.jumpType == 2? '网页链接' : ''" :rules="{ required: true, message: dialogForm.jumpType == 1? '请输入页面路径' : dialogForm.jumpType == 2? '请输入网页链接' : '', trigger: ['change', 'blur']}"><el-input v-model="dialogForm.pathOrLink" :disabled="disabled" :placeholder="dialogForm.jumpType == 1? '请输入页面路径' : dialogForm.jumpType == 2? '请输入网页链接' : ''"/></el-form-item>
重点:
最终是给这个 el-form-item 加上了key绑定了值就解决了