背景

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

TSS 自定義了基礎(chǔ)組件 ElTreeSelect。在 el-form 中使用時(shí)，會(huì)出現(xiàn)異?，F(xiàn)象：

選擇數(shù)據(jù)后，關(guān)閉并重置表單（resetFields），會(huì)觸發(fā) ElTreeSelect 表單項(xiàng)的校驗(yàn)，導(dǎo)致再次打開表單時(shí)，表單項(xiàng) ElTreeSelect 有校驗(yàn)提示（比如：必填）

原因

組件 ElTreeSelect 內(nèi)部引用了 el-input 組件，其在 value props 變化時(shí)會(huì)觸發(fā) el-form 表單的 validate 表單校驗(yàn)。源碼：https://github.com/ElemeFE/element/blob/55bac06f0f9e26b820518243f3987cab9699001b/packages/input/src/input.vue#L266

解決方案

給組件 ElTreeSelect 內(nèi)部的 el-input 組件設(shè)置 props: validate-event=false。

新問題

表單項(xiàng) ElTreeSelect 的校驗(yàn)在 change、blur 時(shí)不會(huì)如期望觸發(fā)，只會(huì)在點(diǎn)擊表單提交時(shí)校驗(yàn)才會(huì)觸發(fā)。

原因

組件 ElTreeSelect 在 value props 變化時(shí)，沒有觸發(fā) el-form 表單的 validate 表單校驗(yàn)。

解決方案

照葫蘆畫瓢，同 element-ui 表單組件一樣，在 value 監(jiān)聽器中校驗(yàn)值變化，并觸發(fā)表單校驗(yàn)。

需要依賴的方法和工具函數(shù)可以從官方源碼中獲取。

image.png