vue视图更新---this.$set方法

效果如下：

 

 

 

完整代码如下：

<el-row class="title-search font14" style="margin-top: 10px">
        <el-col :span="6" class="f-tal">
          <div class="weui-row weui-no-gutter">
            <div class="weui-col-80 group">
              <div class="col f-tac left-border">收款金额</div>
              <div class="col" style="flex: 2">
                <el-input
                  v-model="payAmount"
                  placeholder="收款金额"
                  :controls="false"
                  :precision="2"
                  :min="0"
                  @blur="matchAmount"
                >
                </el-input>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12" class="f-tal">
          <div class="weui-row weui-no-gutter">
            <div class="weui-col-80 group">
              <div class="col f-tac left-border">备注</div>
              <div class="col" style="flex: 2">
                <el-input v-model="remark" width="100%" placeholder="备注">
                </el-input>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="1" class="f-tal">
          <el-button
            type="info"
            class="themeBg"
            @click="saveRepaymentOrder"
            style="line-height: 35px !important; cursor: pointer !important"
            ><i class="icon icon-baocun font14" />&nbsp;&nbsp;保存</el-button>
        </el-col>
      </el-row>
      <div style="height: calc(100% - 50px)" class="table-height">
        <div class="f-table-div" style="margin-top: 15px">
          <table class="font12 f-tac">
            <tr class="f-tac" style="border: 0px solid #c0c0c0">
              <th style="width: 6%">序号</th>
              <th style="width: 8%">单号</th>
              <th style="width: 8%">挂账日期</th>
              <th style="width: 8%">挂账总额</th>
              <th style="width: 8%">已还金额</th>
              <th style="width: 8%">减免金额</th>
              <th style="width: 8%">本次还款</th>
              <th style="width: 8%">本次减免</th>
              <th style="width: 8%">本次未还</th>
              <th style="width: 20%">备注</th>
            </tr>
            <tr v-if="creditRecordsList.length <= 0">
              <td colspan="10" style="color: #888; line-height: 200px">
                <i class="icon icon-tishi" />&nbsp;&nbsp;暂无数据
              </td>
            </tr>
            <tr
              v-for="(item, index) in creditRecordsList"
              :class="{ tableEven: index % 2 != 0 }"
              class="trHover"
              v-else
            >
              <td class="f-tac">{{ index + 1 }}</td>
              <td class="f-tac">{{ item.billNo }}</td>
              <td class="f-tac">
                {{ moment(item.creditTime).format('YYYY-MM-DD') }}
              </td>
              <td class="f-tac">{{ item.creditAmount | money }}</td>
              <td class="f-tac">{{ item.repaymentAmount | money }}</td>
              <td class="f-tac">{{ item.giftAmount | money }}</td>
              <td class="f-tac">
                <el-input-number
                  class="hz-iptnum"
                  v-model="item.currentPayAmount"
                  :max="
                    item.creditAmount - (item.repaymentAmount + item.giftAmount)
                  "
                  :precision="2"
                  style="width: 100%"
                  :controls="false"
                  @blur="
                    selectColum = ''
                    sumAmount
                  "
                />
              </td>
              <td class="f-tac">
                <el-input-number
                  class="hz-iptnum"
                  v-model="item.currentGiftAmount"
                  :max="
                    item.creditAmount -
                    (item.repaymentAmount +
                      item.giftAmount +
                      item.currentPayAmount)
                  "
                  :precision="2"
                  style="width: 100%"
                  :controls="false"
                  @blur="
                    selectColum = ''
                    sumAmount
                  "
                />
              </td>
              <td class="f-tac">
                {{
                  (item.creditAmount -
                    item.repaymentAmount * 1 -
                    item.giftAmount * 1 -
                    item.currentPayAmount -
                    item.currentGiftAmount)
                    | money
                }}
              </td>
              <td class="f-tac" style="width: 10%; padding: 0px 0px">
                <el-input
                  class="hz-iptnum"
                  v-model="item.memo"
                  placeholder=""
                />
              </td>
            </tr>
          </table>
        </div>
      </div>

//
    // 获取还账管理列表
    //
    getCreditRecords() {
      var keyword = ''
      if (this.creditId) {
        keyword += '&creditId=' + this.creditId
      }
      this.$http.get('credit/queryCreditRecords?' + keyword).then(
        (response) => {
          if (response.body.suc == 0) {
            for (var i = 0; i < response.body.data.length; i++) {
              this.$set(response.body.data[i], 'isShow', false)
            }
            this.creditRecordsList = response.body.data
            //设置列表初始值
            this.createTable = JSON.parse(JSON.stringify(response.body.data))
          }
        },
        (response) => {}
      )
    },

sumAmount() {
      let sumAmount = 0
      let sumGiftAmount = 0
      for (let i = 0; i < this.creditRecordsList.length; i++) {
        sumAmount = sumAmount + this.creditRecordsList[i].currentPayAmount * 1
        sumGiftAmount =
          sumGiftAmount + this.creditRecordsList[i].currentGiftAmount * 1
      }
    },

    //收款金额失去焦点时@blur触发执行以下方法，使收款金额按照列表从上至下的顺序还款，并刷新列表填充数据，通过this.$set方法
    matchAmount() {
      var amount = this.payAmount
      console.log(amount)
      console.log(this.createTable)
      for (var i in this.creditRecordsList) {
        if (amount > 0) {
          if (!this.creditRecordsList[i].currentGiftAmount) {
            this.creditRecordsList[i].currentGiftAmount = 0
          }
          console.log('12345678')
          console.log(this.createTable)
          amount -=
            this.createTable[i].creditAmount -
            this.createTable[i].repaymentAmount * 1 -
            this.createTable[i].giftAmount * 1 -
            this.creditRecordsList[i].currentGiftAmount * 1
          console.log('本次还款剩余:' + amount)
          if (amount >= 0) {
            console.log('12345678')
            this.$set(
              this.creditRecordsList[i],
              'currentPayAmount',
              this.createTable[i].creditAmount -
                this.createTable[i].repaymentAmount * 1 -
                this.createTable[i].giftAmount * 1 -
                this.creditRecordsList[i].currentGiftAmount
            )
          } else {
            this.$set(
              this.creditRecordsList[i],
              'currentPayAmount',
              this.createTable[i].creditAmount -
                this.createTable[i].repaymentAmount * 1 -
                this.createTable[i].giftAmount * 1 -
                this.creditRecordsList[i].currentGiftAmount * 1 +
                amount
            )
            // this.tableData[i].currentPayAmount = this.payAmount;
          }
        } else {
          this.$set(this.creditRecordsList[i], 'currentPayAmount', 0)
          // this.tableData[i].currentPayAmount = 0;
        }
        this.sumAmount()
      }
      this.$forceUpdate()
      console.log('123456789')
      console.log(this.creditRecordsList)
    },

 

我最开始用this.$forceUpdate()刷新，但是更新失败，所以改用了this.$set()方法，vue的原理是在创建实例的时候遍历date里面的值，监听'gettrt'和'setter'方法，一旦这些值更新了，就会触发对应的视图更新而使用this.$set的话，vue会对其双向绑定，监听getter和setter触发视图更新。