背景
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
网友评论