vue element form 验证了解一下?

原创 tianxiaofeng747 随笔 技术 509阅读 2018-06-04 16:39:54 举报

用elment ui 开发的时候,我们会遇到form 验证。
然而, element ui 的form 控件并不能涵盖所有的情况,
比如: 下拉树。
https://vue-treeselect.js.org/#events
那么,这个插件如何用form 验证呢?
我们试一试
第一步:把下拉树封装成一个全局组件

第二步:引用,并加入form-item中

规则大概这样:

然后发现只有点击提交的时候是有验证的, 当选中其中一个选项的时候 是不能实时验证的。
怎么破?
重点来了:
通过查看elment-ui 的源码,我们发现,form-item 主要是注册了两个事件来验证表单,

然后触发事件用的是 dispatch, 主要是 input 和select 比如:

dispatch 函数的主要功能就是 不断的找特定名称(第一个参数)的上级元素,触发自定义的事件(第二个参数),去验证特定的值(第三个参数)。
然而我发现用第三方插件 是不能 直接 dispatch 的。
然后只能直接拿到 form-item的引用,去emit。(在form-item上定义 ref),然后通过this.$refs.name拿。
最后变成这样。

看看效果:

干的漂亮!
啰里啰嗦说了这么多,其实总结起来,就三条:
1: 在 form-item 上定义 prop 和 ref
2: 然后在插件的change回调里(或者watch 你的model)触发 你定义的 rules 事件 change 或 blur。
如:myTree.$emit.apply(myTree, ['el.form.change'].concat(val));
就这么简单,
注:假如是自定义插件,就可以使用 dispatch事件, 当然了, 这个要 混入进去。

完!

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复