文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

element ui的el-input-number修改数值失效怎么解决

2023-06-30 16:18

关注

这篇文章主要介绍了element ui的el-input-number修改数值失效怎么解决的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇element ui的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]+$/    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()的情况:

你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢,原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数,因为该钩子函数执行时所有的DOM挂载和渲染都已完成,此时在该钩子函数中进行任何DOM操作都不会有问题 。

在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构的时候,这个操作都应该放进Vue.nextTick()的回调函数中。

最新说明

目前element更新到2.13.2版本可以通过“precision数值精度”去控制了。

<el-input-number size="mini" class="just-full-width" v-model="cycle" :min="1" :max="3600" :precision="0"></el-input-number>

但是有个弊端,就没有填错的提示了&hellip;

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

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

当num设置为 null 或者 ""  都不能将输入框的值变为空

element ui的el-input-number修改数值失效怎么解决

后来发现 将num 设置为  undefined

element ui的el-input-number修改数值失效怎么解决

关于“element ui的el-input-number修改数值失效怎么解决”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“element ui的el-input-number修改数值失效怎么解决”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯