这是一个简单的不能再简单的,朴实的不能再朴实的vue-element的输入框。然后很朴实的给加上事件.
<el-input v-model="scope.row.price" placeholder="单价"
@input="priceinput(scope.row)"
@change="amountchange(scope.row)"
onkeyup="this.value=this.value.replace(/[^\d.-]/g,'');"
></el-input>
然后测试同学测出了神奇的一幕,就是被他们这么搞一下
image.png
,然后scope.row传出去的值就不联动了,item.price 就不变了,怎么回事了,先想怎么解决吧,用js原生的事件吧,然后对比一下原生事件里面的值和item就是vue传回来的值,如果不一样就用原生事件里面的。
<el-input v-model="scope.row.price" placeholder="单价"
@input.native="priceinput(scope.row)"
@change.native="amountchange(scope.row,$event)"
onkeyup="this.value=this.value.replace(/[^\d.-]/g,'');"
></el-input>
amountchange(item,e){
// console.log(e?e.target.value:"非原生",item.price)
if( e ){
if( e.target.value !== item.price ){
item.price = e.target.value;
}
}
}
然后就解决了
具体我得出一个小例子,第一次在简书写东西,不知道能不能回来修改,不能改就再写一篇。
网友评论