el-form-item 校验问题

最新推荐文章于 2025-06-25 17:03:49 发布

weixin_33738555

最新推荐文章于 2025-06-25 17:03:49 发布

阅读量5k

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c81dde7f265da2d89635d89

在Vue使用el-form-item时，若校验元素非标准输入框，值改变后不会触发重新校验。问题源于自定义组件未触发'el.form.change'事件。解决方法是在组件上为el-form-item添加ref，监听值变化，手动触发'el.form.change'事件以实现校验。

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

el-form-item校验问题

场景

表单中，有的校验元素不是标准的输入框，如：

这种场景下，el-form-item上prop指定的值已经变化后，不会触发重新校验，导致选中之后，错误信息不消失

原因

跟踪el的源码，发现原因是，el自己的表单输入元素在值改变后，会触动去触发上层的el-form-item组件的 ‘el.form.change’事件，el-from-item接收到此事件后，会重新校验，而自定义的输入组件改变值之后，并不会触发el-form-item上的‘el.form.change’事件，导致不会重新校验

解决方法

对需要特殊输入组件的绑定值，进行watch，监听到变化后，用代码去触发上层el-form-item的‘el.form.change'事件

在组件上为el-from-item添加ref

<el-form-item label="选择征信报告" prop="creditReportId" v-if="!infoDisabled" ref="creditReportItem">
          <el-button
            v-show=

最低0.47元/天解锁文章

200万优质内容无限畅学