一直以来我都没有搞懂el-form的rules究竟是怎么工作的，我只是按照文档画瓢而已。这次有个需求把界面上的el-select替换成树形的下拉框，只能自己封装了，同时这里用到了rules，没办法我只能让自定义的树形组件(我取名叫DropdownTree)支持rules了。可是我对这个一无所知！！！
把拉代码吧，还能怎么办呢？
经过艰苦卓绝的一个小时，总算搞懂了。我下面尝试总结一下
当表单元素（比如el-input），在value变化或blur时，会触发el.form.change和el.form.blur到ElFormItem，这是使用emitter.js中的dispatch实现的。ElFormItem就会调用自身的validate方法来做验证。validate方法借助了AsyncValidator，这个是一个第三方包，这里就不讨论了。
AsyncValidator的验证需要我们传入验证规则，ElFormItem怎么获取验证规则的呢？它会综合ElForm上的rules和自己的rules，以及ElFormItem上的required字段生成一个规则数组，这里要说一下ElForm上的ElFormItem上的rules是互斥的，后者的优先级高。
接下来再提一下ElForm.validate的实现，它会调用所有设置了prop的ElFormItem的validate。
如果要实现自己的表单元素，并且支持rules的话，需要在自己的表单组件中emit出el.form.change和el.form.blur事件。
如果有帮助，请点赞哦:)
版权声明：本文为txyzqc原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。