element ui的el-input-number修改數值失效的問題及解決

Posted on 2022-05-23 by WalkonNet

element ui的el-input-number修改數值失效

問題代碼

目的：實現去掉小數位。

<el-input-number v-model="cycle" @change="vaidateCycle" :min="1" :max="3600"></el-input-number>
vaidateCycle () {
    let re = /^[0-9]+$/
    if (!re.test(this.cycle)) {
        this.$message.error('請輸入1~3600之間的正整數！')
        this.cycle = parseInt(this.cycle)
    }
}

當在輸入框輸入12.3時，光標移開觸發change事件，輸入框的值會變成12；

再次反復操作，輸入12.3，光標移開觸發change事件，輸入框的值仍然是12.3；

總之輸入框能不能祛除小數位不可控。

解決辦法

隻需使用$nextTick函數，改為如下即可：

<el-input-number v-model="cycle" @change="vaidateCycle" :min="1" :max="3600"></el-input-number>
vaidateCycle () {
    let re = /^[0-9]+$/
    if (!re.test(this.cycle)) {
        this.$message.error('請輸入1~3600之間的正整數！')
        this.$nextTick(() => {
            this.cycle = parseInt(this.cycle)
        })
    }
}

分析說明

el-input-number是element的一個組件，並非簡單的標簽，而change事件監聽的是整個組件。

也就是說，光標移開觸發change事件，此時cycle值為12.3，馬上觸發dom更新。

此時修改瞭cycle的值，祛除瞭小數位。（當前組件已經被監測到變化，已經觸發瞭重新渲染dom，此時再修改並不會再次渲染dom。）

導致dom更新在前，cycle的值取整操作在後，並且此後無刷新控制dom重新渲染的指令。

所以dom上掛載顯示的值仍然是12.3，但是console.log(this.cycle)的值為12。

此時需要用到$nextTick函數，即在dom初次完成渲染掛載後，修改其值再次觸發dom渲染掛載。

官方資料

異步更新隊列：

可能你還沒有註意到，Vue 異步執行 DOM 更新。隻要觀察到數據變化，Vue 將開啟一個隊列，並緩沖在同一事件循環中發生的所有數據改變。

如果同一個 watcher 被多次觸發，隻會被推入到隊列中一次。

這種在緩沖時去除重復數據對於避免不必要的計算和 DOM 操作是非常重要的。

然後，在下一個的事件循環“tick”中，Vue 刷新隊列並執行實際 (已去重的) 工作。Vue 在內部嘗試對異步隊列使用原生的 Promise.then 和 MessageChannel，如果執行環境不支持，會采用 setTimeout(fn, 0) 代替。

需要用的$nextTick()的情況：

1、你在Vue生命周期的created()鉤子函數進行的DOM操作一定要放在Vue.nextTick()的回調函數中。原因是什麼呢，原因是在created()鉤子函數執行的時候DOM 其實並未進行任何渲染，而此時進行DOM操作無異於徒勞，所以此處一定要將DOM操作的js代碼放進Vue.nextTick()的回調函數中。與之對應的就是mounted鉤子函數，因為該鉤子函數執行時所有的DOM掛載和渲染都已完成，此時在該鉤子函數中進行任何DOM操作都不會有問題。

2、在數據變化後要執行的某個操作，而這個操作需要使用隨數據改變而改變的DOM結構的時候，這個操作都應該放進Vue.nextTick()的回調函數中。

el-input-number組件無法修改默認值為空

<el-input-number v-model="num"  :min="1" :max="10" label="描述文字"></el-input-number>

當num設置為 null 或者 "" 都不能將輸入框的值變為空

後來發現將num 設置為 undefined

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

element ui的el-input-number修改數值失效的問題及解決

目錄