背景
TSS 自定義了基礎(chǔ)組件 ElTreeSelect罕容。在 el-form 中使用時(shí)萌抵,會(huì)出現(xiàn)異常現(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ù)可以從官方源碼中獲取。