element ui form表单项显隐，校验（不该）触发问题

最新推荐文章于 2025-04-08 11:29:39 发布

原创最新推荐文章于 2025-04-08 11:29:39 发布 · 3.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

前端专栏收录该内容

31 篇文章

订阅专栏

本文介绍了在Vue.js中遇到的一个问题：切换下拉框导致其他表单项校验触发。解决方案是在表单项上添加key属性，通过改变key值避免组件复用引起的问题，实现动态显隐并正确控制校验行为。代码示例展示了如何在不同的条件分支下使用不同的key值来控制即时配送表单项的显示和验证。

1.问题描述：如题，切换某个下拉框，控制另一个表单项的显隐，总会触发校验规则，长这样：

2.解决办法：在表单项上加个key，完美解决问题，代码如下：

<el-form ref="form22" :model="form22" label-width="90px">
        <el-form-item label="活动区域">
          <el-select v-model="form22.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="1"></el-option>
            <el-option label="区域二" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="即时配送1"
          v-if="form22.region == 1"
          :key="1"
          prop="delivery1"
          :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
        >
          <el-input v-model="form22.delivery1"></el-input>
        </el-form-item>
        <el-form-item
          label="即时配送2"
          v-if="form22.region == 2"
          :key="2"
          prop="delivery2"
          :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
        >
          <el-input v-model="form22.delivery2"></el-input>
        </el-form-item>
      </el-form>