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

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

如果封装的自定义表单组件,内部存在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]);
    }
  },
}


解决方案:

this.$emit('input',value);
//添加下面这句
this.$parent.$emit('el.form.change');
相关文章
|
前端开发
Vue3输入框focus失效
Vue3引入elementplus的输入框el-input,如果想在鼠标点击即搜索框获得焦点后发生变化,那就得用到css的:focus选择器
566 1
element-ui table排序sortable三种状态,怎么去掉默认状态
在 element-ui 中,也定义了 sort-orders 有三种状态: ascending、descending、null,这三种状态形成一个循环切换。
2749 0
|
6月前
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
922 1
|
6月前
|
JavaScript API
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
855 0
|
JavaScript
vue项目在点击重复路由时报错(NavigationDuplicated: Avoided redundant navigation to current location)
vue项目在点击重复路由时报错(NavigationDuplicated: Avoided redundant navigation to current location)
131 2
|
JavaScript
vue 怎么将Checkbox 多选框选中的值提交
vue 怎么将Checkbox 多选框选中的值提交
82 0
|
JavaScript API
vue的select下拉框多选项-multiple属性
vue的select下拉框多选项-multiple属性
513 0
|
Java Android开发
el表达式设置option标签selected
el表达式设置option标签selected
299 0
el表达式设置option标签selected