关于前端:自定义组件触发elementui-elform-校验

一、问题

我的项目应用 element-ui 中的 el-form 进行表单校验，表单中含有一个组织树的性能，应用的是 vue-treeselect 组件，当校验机会设置 change 时，发现抉择树结构后没有触发校验，但理论值曾经扭转。

二、解决思路

1. 开始的时候，狐疑没有触发 change 事件导致表单没有捕捉到，于是当 vue-treeselect 扭转后，应用 $emit 触发 change 事件，测试后发现没有作用
2. el-select 抉择后能够触发 change 事件，于是想看一下 el-select 的源码是怎么写的，在 watch 监听里当 value 扭转时，有这么一段代码

this.dispatch('ElFormItem', 'el.form.change', val);

3. 是不是当 vue-treeselect 扭转后，触发 ElFormItem 组件的 el.form.change 事件就能够了
通过验证的确能够，起因是因为 ElFormItem 组件中监听 el.form.change 触发校验。
最终残缺代码：
首先引入 dispatch 函数，能够间接放到本人的 methods 中，如何间接优雅引入，期待大家补充。

dispatch(componentName, eventName, params) {
  var parent = this.$parent || this.$root;
  var name = parent.$options.componentName;

  while (parent && (!name || name !== componentName)) {
    parent = parent.$parent;

    if (parent) {name = parent.$options.componentName;}
  }
  if (parent) {parent.$emit.apply(parent, [eventName].concat(params));
  }
},

而后在数据变动的地位调用就能够了

 treeSelectChange(node, instanceId) {
  this.isSelect = true;
  this.$emit("treeSelectChange", node, instanceId);
  this.$emit('change', instanceId);
  setTimeout(()=>{this.dispatch("ElFormItem", "el.form.change", [node.orgId]);
  })
  if (this.column.change) {this.column.change(node, instanceId);
  }
},

这里加一个 setTimeout 是因为值还没有扭转，这个因控件而定，如果值曾经扭转了就不须要了。