效果如下：
完整代码如下：
<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" /> 保存</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=" 6%">序号</th> <th style=" 8%">单号</th> <th style=" 8%">挂账日期</th> <th style=" 8%">挂账总额</th> <th style=" 8%">已还金额</th> <th style=" 8%">减免金额</th> <th style=" 8%">本次还款</th> <th style=" 8%">本次减免</th> <th style=" 8%">本次未还</th> <th style=" 20%">备注</th> </tr> <tr v-if="creditRecordsList.length <= 0"> <td colspan="10" style="color: #888; line-height: 200px"> <i class="icon icon-tishi" /> 暂无数据 </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=" 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=" 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=" 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触发视图更新。