1、问题项目使用element-ui中的el-form进行表单验证。表单包含组织树的功能,使用vue-treeselect组件。当设置校验时序发生变化时,发现选择树结构后并没有触发校验,而是实际值发生了变化。2.开始解决的时候怀疑是没有触发change事件,没有抓取到表单,所以在vue-treeselect发生变化的时候,使用了$emit来触发change事件。经过测试,发现没有效果。选中el-select后,可以触发change事件,想看看el-select的源码是怎么写的。watch监控中值变化时,有这么一段代码this.dispatch('ElFormItem','el.form.change',val);3.是不是当vue-treeselect改变后,触发ElFormItem组件的el.form.change事件。经过验证,确实可以,因为ElFormItem组件监听el.form.change触发验证。最终完整代码:首先引入dispatch函数,可以直接放在自己的方法中。如何直接优雅的介绍,期待大家的补充。dispatch(componentName,eventName,params){varparent=this.$parent||这个.$root;varname=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,因为监听的值没有变化,这个要看控件,如果值变化了,就不需要了。
