问题:在pl-table(可以让使用大量表格的数据不卡顿的库)中使用el-input,修改el-input中的内容是可以的,但是如果下拉之后不显示在页面之后,再次回到这个位置,修改的值显示不成功,还是原来的值。另外输入的值不能超过预先设置的值,如果超过就弹出提示框,另外保证精确到小数点两位数
在修改过程中遇到的技术
1.el-input-number
输入框输入的数据是数字,可以设置精度
2.关于el-input-number中触发change事件想要传递一个自定义的值
因为此时的change触发的时候,默认有两个值,一个是currentValue(最新的值) , 第二个是oldValue(修改前的值),但是现在的需求是想要多加一个自定义的值
所以此时的代码可以这样写
<pl-table-column prop="reductionAmount" width="220" label="减免金额(元)">
<template slot-scope="scope">
<el-input-number
:precision="2"
:disabled="publishNum==1?true:false"
:controls="false"
v-model="scope.row.reductionAmount"
@change="(currentValue, oldValue)=>changeAction(currentValue,
oldValue,scope.row)"
></el-input-number>
</template>
</pl-table-column>
//然后再在method中定义changeAction方法
changeAction(currentValue, oldValue, row) {
},
在changeAction中就可以拿到传过来的scopt.row中的值了
3.本次使用到了宏任务和微任务的执行顺序
如果超过了预先设置的值,要通过this.$nextick来修改值,这样才能使更新的值正确的显示
但是还是因为要记录修改的值,所以把拿到修改的值得操作放在了setTimeout中,这样才能够保证拿到的值是更新完的值
解决这个问题最重要的部分还是this.$nextick和setTimeout
this.$nextick保证修改的值更新到页面上,setTimeout保证能够正确的拿到修改的值,然后进一步操作
changeAction(currentValue, oldValue, row) {
if (currentValue > row.billAmount) {
this.beyondDialog = true;
this.$nextTick(() => {
row.reductionAmount = 0;
});
}
setTimeout(() => {
this.modifyRecord[row.billNo] = {
reductionAmount: Number(row.reductionAmount),
remark: row.remark,
billNo: row.billNo,
};
}, 0);
},