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

news2024/11/15 19:59:37

哈喽，大家好啊，最近用到了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了