当前位置：首页 > news >正文

vue2 使用el-form中el-form-item单独绑定rules不生效问题

news 来源：原创 2025/6/26 14:35:22

我居然在同一个问题在了两次跟头！！！必须记录这个小细节！！！
背景：一个后台的表单校验，表单中需要单独绑定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绑定了值就解决了