ElementUI表单校验trigger设为change无效问题

蛰伏已久 蛰伏已久 2022-07-20

如果封装的自定义表单组件,内部存在el-form,所有的表单元素都在form内部,然后当整个form的数据变化时,this.$emit('input', value),这种情况不会触发表单的校验的,因为当前组件作为一个整体,被嵌入在el-form-item中,它并不知道你的数据变化了

以el-input为例,在源码中可以看到,在watch中监听value变化,并通知上层数据变了

watch: {
  value(val) {
    this.$nextTick(this.resizeTextarea);
    if (this.validateEvent) {
      this.dispatch('ElFormItem', 'el.form.change', [val]);
    }
  },
}


解决方案:

在我们的自定义组件数据变化时触发el.form.change事件

this.$emit('input',value);
//添加下面这句
this.$parent.$emit('el.form.change');



分享到

点赞(2)