问题描述: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)
},