element ui el-input,el-input-number 默认值设置

　　摘要：本文主要介绍了elementui的el-input-number修改无效的问题及解决方法，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

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] $/

　　如果(！重新测试(此循环)){

　　这个。$message.error(请输入一个介于1和3600之间的正整数！)

　　this.cycle=parseInt(this.cycle)

　　}

　　当在输入框中输入12.3时，光标移开触发change事件，输入框的值会变成12；

　　重复操作，输入12.3，移动光标触发变更事件，输入框的值仍然是12.3；

　　简而言之，输入框能否消除小数位是不可控的。

解决办法

　　只需使用$nextTick函数，并将其更改为以下内容：

　　El-input-number v-model= cycle @ change= vaidateCycle :min= 1 :max= 3600 /El-input-number

　　vaidateCycle () {

　　let re=/^[0-9] $/

　　如果(！重新测试(此循环)){

　　这个。$message.error(请输入一个介于1和3600之间的正整数！)

　　这个。$nextTick(()={

　　this.cycle=parseInt(this.cycle)

　　})

　　}

分析说明

　　El-input-number是element的一个组件，不是一个简单的标签，而是change事件监控整个组件。

　　也就是说，当光标移开时，触发change事件，周期值为12.3，立即触发dom更新。

　　此时，循环的值被修改，小数位数被删除。(已监视当前组件的更改，这些更改触发了dom的重新呈现。此时，进一步的修改将不会再次呈现dom。)

　　首先是dom更新，其次是cycle的值舍入操作，然后是没有刷新和控制dom重渲染的指令。

　　所以dom上的挂载显示值仍然是12.3，但是console.log(this.cycle)的值是12。

　　此时需要使用$nextTick函数，即在dom完成第一次渲染挂载后，修改其值再次触发dom渲染挂载。

官方资料

　　异步更新队列：

　　如果您没有注意到，Vue异步执行DOM更新。每当观察到数据变化时，Vue将打开一个队列并缓冲在同一事件周期中发生的所有数据变化。

　　如果同一个观察器被多次触发，它只会被推入队列一次。

　　这种在缓冲中删除重复数据的方法对于避免不必要的计算和DOM操作非常重要。

　　然后，在下一个事件循环“滴答”中，Vue刷新队列并执行实际的(已消除重复的)工作。在内部，Vu尝试使用本地的Promise.then和MessageChannel进行异步队列。如果执行环境不支持，它将使用setTimeout(fn，0)来代替。

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

　　1.你在Vue生命周期的created () hook函数中执行的DOM操作，必须放在Vue.nextTick()的回调函数中。原因是什么？原因是在执行created () hook函数时，DOM实际上并不做任何渲染，此时DOM操作无异于徒劳。所以这里DOM操作的js代码必须放入Vue.nextTick()的回调函数中。与之相对应的是挂载的hook函数，因为在执行hook函数的时候已经完成了所有的DOM挂载和渲染，此时hook函数中的任何DOM操作都不会有问题。

　　2.当一个操作要在数据变化后执行，并且这个操作需要使用随数据变化而变化的DOM结构时，这个操作要放到Vue.nextTick()的回调函数中。

el-input-number组件无法修改默认值为空

　　El-input-number v-model= num :min= 1 :max= 10 label= descriptive text /El-input-number

　　当num设置为null或“”时，输入框的值不能为空。

　　后来发现num设置成了undefined

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。