小弟带你走进VUE中input最大值设置出现的问题以及黑科技解决方案
大家好,我是初心。
前言:以下只針對(duì)input為number類型并且設(shè)置最大值時(shí)對(duì)應(yīng)的解決方案。至于其他情況,課后可以自己試試。。。額,那么繼續(xù)了
目標(biāo):提供2種黑科技解決input值不能視圖不更新問(wèn)題
Don't BB,Look me copy
1 <el-table-column label="入庫(kù)數(shù)量" prop="zj" min-width="80" align="center" show-overflow-tooltip> 2 <template slot-scope="scope"> 3 <el-input 4 :value="scope.row.rksl" 5 @input="numberChange(arguments[0],scope.row.id)" 6 @change="numberChange(arguments[0],scope.row.id)" 7 type="number" 8 :max="scope.row.sl" 9 > 10 </el-input> 11 </template> 12 </el-table-column>?
1 [ 2 { 3 id : 0,sm : '自動(dòng)化管理', zz : '黎明', cbs : '電子音像出版社', ghs : '電子音像出版社', jg : 30.00, zk : '7.0', 4 rksl : 300, sl : 300, bz : '' 5 } 6 ]?
以上分別時(shí)html代碼data數(shù)據(jù)以及js方法
這樣有的朋友該吐槽了,用max=“300”,控制最高值。那么我就要回答你,少年你還是想的太簡(jiǎn)單,等一下我解釋給你,Don't worry!
然后上視圖
PS:我此次用的element-UI做的,但是不影響,效果都一樣。
可以看到input里初始值是數(shù)量的頂峰值,那么重點(diǎn)來(lái)了,只要input框里輸入數(shù)值位數(shù)在3位數(shù),那么max=“300”方法和這我寫的這個(gè)都是有效的。
但是輸入在4位數(shù)的時(shí)候,比如 輸入299你在輸入任意一個(gè)數(shù)的話,值是300,再接著輸入任意一個(gè)數(shù)就會(huì)如下圖所示(上面max=“300”的方法也是下面效果)
?
?
?此時(shí)輸入出現(xiàn)3009了,是什么導(dǎo)致JS GG的呢,我嘗試去找問(wèn)題。
?
可能與上面的代碼有所不同,不過(guò)在這里效果都是一樣。
debugger不虧是神碼,這時(shí)會(huì)發(fā)現(xiàn)
?
?TM明明把值重置了300為什么視圖上面還是顯示3009(PS:明明不是人名)
事情發(fā)展到了這里,我反思了一下,究竟什么讓視圖沒(méi)有變化。然而我想了大概30S左右,得出一個(gè)結(jié)果。當(dāng)你輸入300的時(shí)候date里的值也是300,在加一個(gè)數(shù)字的時(shí)候 JS計(jì)算后也是的300 那么data里的值的300和新的300沒(méi)有變化,所以導(dǎo)致視圖沒(méi)有更新。當(dāng)然這也只是個(gè)猜想。既然是猜想那么就證實(shí)一下吧。
我針對(duì)了我的想法,想出了2種解決方案
解決方案1:把data里數(shù)據(jù)的值強(qiáng)行改變你輸入的值,之后再做判斷,并且賦值。這樣一來(lái)data里的值一定有變動(dòng),那么視圖也會(huì)更新
圖1方案是失敗的,圖2為正確操作。至于為什么要加this.$nextTick,不懂得可以查一下,這里就不做引申了。
然后此方案完美解決(黑科技有沒(méi)有),這種解決方法也是夠賤得了,但是看下面的方法你就知道這方法還遠(yuǎn)遠(yuǎn)不夠賤。
解決方案2:input事件傳遞$event,直接改input里的值
PS:此方法在element-ui上的標(biāo)簽不能解決,若你用了emement-ui還是老老實(shí)實(shí)的用上面的方法吧,因?yàn)閑lement-UI有一套自己的方法傳值,不支持$event,翻一下源代碼就能看到。所以比較蛋疼
代碼html:
1 <input 2 :value="scope.row.rksl" 3 @input="numberChange($event,scope.row.id)" 4 @change="numberChange($event,scope.row.id)" 5 type="number" 6 :max="scope.row.sl" 7 />js:
1 numberChange(e,id){ 2 let val = e.target.value; 3 let index = findIndex(this.tableData1,{id : id}); 4 let newVal = Math.min(toNumber(val), this.tableData1[index].sl); 5 this.tableData1[index].rksl = toNumber(newVal); 6 e.target.value = toNumber(newVal); 7 }這樣一來(lái)也解決了。
總結(jié):
方法1:在視圖上? ?輸入3009看到的是3009然后的一瞬間馬上變回300,是有過(guò)度效果的。
方法2:在視圖上? 無(wú)變化,輸入300,在輸入一個(gè)數(shù)字,直接變300,無(wú)過(guò)度變化。但是此方法不適用于element-ui!
大家好,我是初心!感謝你能夠花時(shí)間觀看。
第一次寫博客有什么地方不好還請(qǐng)見(jiàn)諒,若有大神能夠指點(diǎn)再感謝不過(guò)。
那么小弟先撤了!拜拜
?
轉(zhuǎn)載于:https://www.cnblogs.com/winter0618/p/9851179.html
總結(jié)
以上是生活随笔為你收集整理的小弟带你走进VUE中input最大值设置出现的问题以及黑科技解决方案的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 【计算机算法设计与分析】——栈和队列
- 下一篇: 几秒之后自动关闭广告