自定义组件触发element-ui el-form 校验

一、问题

项目使用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 是因为值还没有改变，这个因控件而定，如果值已经改变了就不需要了。