ElementUI @change更改select 表单验证失效的解决办法

最新推荐文章于 2025-05-14 18:11:20 发布

原创最新推荐文章于 2025-05-14 18:11:20 发布 · 4.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui

vue 专栏收录该内容

3 篇文章

订阅专栏

在使用ElementUI的select组件时遇到表单验证失效的问题，原因是@change事件未触发表单验证。解决方案是通过使用this.$set()方法来强制更新视图，从而重新触发验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ElementUI @change更改select 表单验证失效的解决办法

起因是这样的，表单有一处，两个Select 选择器是上下级的关系，于是我想到了使用Cascader 级联选择器，来避免先选后选的问题。但是这里的选项是分成两个数组的提交时也是两个字段。用v-model肯定是不行了。只好用@change来绑定值。

HTML

<el-form-item label="申请项目" prop="applyProject">
              <el-cascader
                :value="[
                  businessForm.applyProjectType,
                  businessForm.applyProject,
                ]"
                :options="options"
                :props="{ label: 'dictLabel', value: 'dictLabel' }"
                @change="handleApplyProjectChange"
              ></el-cascader>
</el-form-item>

验证

rules: {
	applyProject: {  
	    required: true,
	    message: '申请项目不能为空',
	    trigger: 'change'
	}
}

handleApplyProjectChange(val) {
	this.businessForm.applyProjectType = val[0];
    this.businessForm.applyProject = val[1];
},

但是，发现每次修改级联选择器的时候根本不更改表单验证啊，打印了一下this.businessForm 发现确实表单是改变了的。肯定是@change修改时没有触发表单验证导致的。最后找到了解决办法，用this.$set()来触发视图更新。

 handleApplyProjectChange(val) {
      this.$set(this.businessForm, "applyProjectType", val[0]);
      this.$set(this.businessForm, "applyProject", val[1]);
    },

关于这类显示与传参不能使用同一个字段，导致无法使用v-model，有更好的解决方法欢迎在评论区留言呦