解决el-input-number修改值后不更新

问题:在pl-table(可以让使用大量表格的数据不卡顿的库)中使用el-input,修改el-input中的内容是可以的,但是如果下拉之后不显示在页面之后,再次回到这个位置,修改的值显示不成功,还是原来的值。另外输入的值不能超过预先设置的值,如果超过就弹出提示框,另外保证精确到小数点两位数

解决el-input-number修改值后不更新

在修改过程中遇到的技术

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);
    },

 

 

上一篇:js数组方法归纳总结


下一篇:【译】【原文翻译计划】Java Optional的flatMap方法