> 文章列表 > 关于使用el-input-number设置不让删除为空,让强制为最小值1,以及从1删除,但是发现输入框还是没有最小值的问题

关于使用el-input-number设置不让删除为空,让强制为最小值1,以及从1删除,但是发现输入框还是没有最小值的问题

关于使用el-input-number设置不让删除为空,让强制为最小值1,以及从1删除,但是发现输入框还是没有最小值的问题

哈喽,大家好啊,最近用到了element的el-input-number 计数器

但是有个问题一直困扰我,就是我发现竟然可以删除输入的值,也不会强制改成最小值

但是因为业务这里不允许数量为空的情况,所以我找了很久,终于实现了:

 <el-input-number v-model="gitem.saleNum" controls-position="right"size="mini"@input="handleInputCount($event, gitem)":min="1" :max="gitem.saleQuantity"></el-input-number>

这里v-modle就是我输入的内容,双向绑定

controls-position 控制按钮位置

size 计数器尺寸

@input 是箭头输入事件

min是指的是计数器控制最小值

max是指的是计数器控制最大值

接下来看我js

我这里就是当监听到输入的内容为空,然后强制性设置为最小值1

       /*** 修改订单行数量,不让删除,当删除时,强制弄成最小值*/handleInputCount(e, item) {if(!item.saleNum){item.saleNum = 1;}},

看页面效果 发现要是我的值1 然后我删除,然后我的input框里面还是为空,然后大概发现是好像如果设置为1,然后input事件,监听不了改变  因为最小值为1,发现是不变的,然后就没有触发min的属性(哎呀,具体的我也不知道怎么说,希望了解原理的小伙伴评论区告诉我下)

然后我就设置修改为:

       /*** 修改订单行数量,不让删除,当删除时,强制弄成最小值*/handleInputCount(e, gitem) {if(!e){gitem.saleNum = -1;}},

这样每次清空 设置为-1的时候,就会触发min最小值,就强制为最小值1了

 

灵感来源原文:el-input触发了clear事件,但无法清空_el-input清空_琹箐的博客-CSDN博客

计数器element原文:组件 | Element