切換Radio單選框時额湘,對應(yīng)的Input已經(jīng)置為了不可編輯七问,但表單驗證的信息仍然存在。
兩個Radio各對應(yīng)三個Input存哲,所有Input都加了Form表單,當(dāng)在切換Radio時黔夭,將對應(yīng)的Input設(shè)為可編輯宏胯,另外三個置為不可編輯。而這時候會發(fā)現(xiàn)另外三個已經(jīng)置為不可編輯的框的表單驗證仍然生效了本姥。解決辦法:
在Radio的on-change回調(diào)中加一句:this.$refs['formValidate'].validate()肩袍。
這里iview官網(wǎng)也提供了清除表單的方法:this.$refs.xxx.resetFields()。 但是在我們上面那種場景下這樣直接清除會帶來一個問題婚惫。
比如說我有多個Input氛赐,這些Input是單獨的,沒有Radio或其他東西作為父元素 先舷。而這些單獨的Input又和嵌套了Radio的Input一起加了Form表單驗證艰管。這時候如果在切換Radio時調(diào)用this.$refs.xxx.resetFields()方法,會發(fā)現(xiàn)所有的Input表單提示都被清除了蒋川。如果這些單獨的Input中的內(nèi)容是不應(yīng)該通過的牲芋,那這個bug是不能忍的。
官網(wǎng)提供的resetFields是對整個表單驗證進(jìn)行清除,而第一種辦法是局部的缸浦。局部清除表單還有種辦法夕冲,但是需要拿到參數(shù)值,然后在看iview底層來拿到你所需要清除的表單元素來做裂逐。因為需要參數(shù)值所以只能在傳了formValidate的方法里面這樣做歹鱼。具體用那種看個人的情況。
在render創(chuàng)建的組件或標(biāo)簽中添加ref
有些情況下需要拿到一些元素卜高,如果這些元素是在html代碼中弥姻,可以直接通過ref="test"添加,但是如果某些元素是通過render動態(tài)創(chuàng)建的掺涛,那直接在render的函數(shù)中寫ref是沒用:
這種方式添加的ref不會報錯庭敦,但在調(diào)用this.$refs.test的時候會為undefined,因為ref是作為渲染結(jié)果被創(chuàng)建的鸽照,所以在初始渲染時它們根本不存在螺捐,所以為undefined,即便把ref="test"寫在props中結(jié)果也一樣矮燎。如果要在這里動態(tài)添加ref定血,就不能使用h函數(shù),而是使用$createElement:
render: (h, params) => {
? ? ? ? ? ? let create = this.$createElement
? ? ? ? ? ? let dom = create('InputNumber', {
? ? ? ? ? ? ? ref: 'skuRef' + params.index,
? ? ? ? ? ? ? on: {
? ? ? ? ? ? ? ? 'on-change': (value) => {
? ? ? ? ? ? ? ? ? ? console.log('change')
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? ? ? return dom
????????}
這是我在針對創(chuàng)建多個InputNumber時的做法诞外,因此后面加了params.index澜沟,用來區(qū)分不同的InputNumber,具體場景根據(jù)實際業(yè)務(wù)需求來峡谊。