关于前端:自定义组件触发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 是因为值还没有扭转，这个因控件而定，如果值曾经扭转了就不须要了。