小弟帶你走進VUE中input最大值設置出現的問題以及黑科技解決方案


大家好,我是初心。

前言:以下只針對input為number類型並且設置最大值時對應的解決方案。至於其他情況,課后可以自己試試。。。額,那么繼續了

目標:提供2種黑科技解決input值不能視圖不更新問題

Don't BB,Look me copy

 1 <el-table-column label="入庫數量" 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 : '自動化管理', zz : '黎明', cbs : '電子音像出版社', ghs : '電子音像出版社', jg : 30.00, zk : '7.0',
4   rksl : 300, sl : 300, bz : ''
5  }
6 ]

 

以上分別時html代碼data數據以及js方法

這樣有的朋友該吐槽了,用max=“300”,控制最高值。那么我就要回答你,少年你還是想的太簡單,等一下我解釋給你,Don't worry!

然后上視圖

PS:我此次用的element-UI做的,但是不影響,效果都一樣。

可以看到input里初始值是數量的頂峰值,那么重點來了,只要input框里輸入數值位數在3位數,那么max=“300”方法和這我寫的這個都是有效的。

但是輸入在4位數的時候,比如 輸入299你在輸入任意一個數的話,值是300,再接着輸入任意一個數就會如下圖所示(上面max=“300”的方法也是下面效果)

 

 

 此時輸入出現3009了,是什么導致JS GG的呢,我嘗試去找問題。

 

可能與上面的代碼有所不同,不過在這里效果都是一樣。

debugger不虧是神碼,這時會發現

 

 TM明明把值重置了300為什么視圖上面還是顯示3009(PS:明明不是人名)

事情發展到了這里,我反思了一下,究竟什么讓視圖沒有變化。然而我想了大概30S左右,得出一個結果。當你輸入300的時候date里的值也是300,在加一個數字的時候 JS計算后也是的300 那么data里的值的300和新的300沒有變化,所以導致視圖沒有更新。當然這也只是個猜想。既然是猜想那么就證實一下吧。

我針對了我的想法,想出了2種解決方案

解決方案1:把data里數據的值強行改變你輸入的值,之后再做判斷,並且賦值。這樣一來data里的值一定有變動,那么視圖也會更新

圖1方案是失敗的,圖2為正確操作。至於為什么要加this.$nextTick,不懂得可以查一下,這里就不做引申了。

然后此方案完美解決(黑科技有沒有),這種解決方法也是夠賤得了,但是看下面的方法你就知道這方法還遠遠不夠賤。

解決方案2:input事件傳遞$event,直接改input里的值

PS:此方法在element-ui上的標簽不能解決,若你用了emement-ui還是老老實實的用上面的方法吧,因為element-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       }

這樣一來也解決了。

總結:

方法1:在視圖上   輸入3009看到的是3009然后的一瞬間馬上變回300,是有過度效果的。

方法2:在視圖上  無變化,輸入300,在輸入一個數字,直接變300,無過度變化。但是此方法不適用於element-ui!

大家好,我是初心!感謝你能夠花時間觀看。

第一次寫博客有什么地方不好還請見諒,若有大神能夠指點再感謝不過。

那么小弟先撤了!拜拜

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM