关于自定义的element-ui表单组件的校验

背景

image-2021-12-17-17-29-17-531.png

TSS 自定义了基础组件 ElTreeSelect。在 el-form 中使用时，会出现异常现象：

选择数据后，关闭并重置表单（resetFields），会触发 ElTreeSelect 表单项的校验，导致再次打开表单时，表单项 ElTreeSelect 有校验提示（比如：必填）

原因

组件 ElTreeSelect 内部引用了 el-input 组件，其在 value props 变化时会触发 el-form 表单的 validate 表单校验。源码：https://github.com/ElemeFE/element/blob/55bac06f0f9e26b820518243f3987cab9699001b/packages/input/src/input.vue#L266

解决方案

给组件 ElTreeSelect 内部的 el-input 组件设置 props: validate-event=false。

新问题

表单项 ElTreeSelect 的校验在 change、blur 时不会如期望触发，只会在点击表单提交时校验才会触发。

原因

组件 ElTreeSelect 在 value props 变化时，没有触发 el-form 表单的 validate 表单校验。

解决方案

照葫芦画瓢，同 element-ui 表单组件一样，在 value 监听器中校验值变化，并触发表单校验。

需要依赖的方法和工具函数可以从官方源码中获取。

image.png