vue表格如何动态添加行数并动态计算内部值

Question

如图所示表格中的金额，折扣比例，折扣金额都是可以输入的，换算关系是：
金额 X 折扣比例 = 折扣金额
并且点击增加一行按钮可以动态添加一行表格行，里面仍旧是每列依旧是输入框，
请教一下如何添入每行中的两列数据以后动态得出剩下的一项数据，比如在第一行的金额写入100，比例是0.6，那么折扣金额自动换算出是60，或者折扣写入60，比例写入0.6，金额自动换算出100，并且下方的合计也是自动计算。
求指点。

• 关注 | 5

• 收藏

• 
  

Answer 1

可以给你的input上加上事件// template 部分代码<el-input v-model="address.jine" @change="getAmount(index)" placeholder="请输入内容" class="inLine"></el-input>// 给你写个简单列子 js方法 me.listAdress 这个是存放table的数组getAmount (index) {//&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 取得当前下标之前的参数&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let me = this&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let totalAmout = 0&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; debugger&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (let i = 0; i <= index; i++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // 这边可以计算结果出每行的结果&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; totalAmout += Number( me.listAdress[i].jine)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(totalAmout)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },

Answer 2

你的表格是v-for生成的吗&nbsp;<button @click="addnewTr"></button>&nbsp; &nbsp; <tr v-for="(item,index) in trs" :key="index">&nbsp; &nbsp; &nbsp; &nbsp; <td><input type="text"></td>&nbsp; &nbsp; &nbsp; &nbsp; <td><input type="text"></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; tr=[...]&nbsp;addnewTr(){&nbsp; &nbsp; &nbsp; &nbsp;this.trs.push(..)&nbsp; &nbsp;}比如这样