解决el-input-number设置min,多次删除输入框值后,视图失效的问题

问题描述:vu2,element中

1.el-input-number设置最小值为1,然后设置change事件,最后把他放在表格里,双向绑定表格中的一个值

2.当我第一次删除输入框的1时,他会重新设置1,然后我再去删除输入框的1,此时他不会重新设置最小值了,视图上显示一个空输入框,但是v-model中的值还是1,我重新给表格数据源赋值也没有用,$set也没有用

解决思路:在输入框的绑定的change事件中,进行判定,如果输入的值为空时,直接手动给该值赋予0,触发el-input-number内部最小值改动事件,让他重新设置为1


<el-input-number
         v-model="scope.row.quantity"
          class="form-input-number"
          controls-position="right"
          :controls="false"
          :min="1"
          :max="99999999"
          clearable
          @change="changeQuantity(scope, $event)"
/>


changeQuantity(scope,e){
                if(!e){
                    scope.row.quantity = 0
                }else{
                    scope.row.quantity = e
                }

   
},

但是,如果该值参与了计算的话,会有一个新问题,因为change会比 el-input-number内部最小值改动事件先执行,所以在这里给绑定的值赋值为0后,计算会以change内scope.row.quantity = 0为准去计算,而不是改动后的最小值,所以让计算在settimeout里执行,让他在赋值完成后去计算

changeQuantity(scope,e){

                if(!e){
                    scope.row.quantity = 0
                }else{
                    scope.row.quantity = e
                }

                setTimeout(()=>{
                    const taxExcludedAmount = Number(
                             scope.row.quantity * scope.row.taxExcludedPrice
                            ).toFixed(2)
                    const taxIncludedAmount = Number(
                                    scope.row.quantity *scope.row.taxIncludedPrice
                                    ).toFixed(2)
                    scope.row.taxExcludedAmount = taxExcludedAmount
                    scope.row.taxIncludedAmount = taxIncludedAmount
                },0)
},

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值