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

Question

---

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

Answer 1

即然是借助 vue 那就简单了。

行号
遍历的时候将 index 输出就行，就像 js 遍历数组一样。

v-for="(item, index) in items"
...
<td>{{index + 1}}</td>

最后的合计
用一个固定的 tr 标签写。
每列的总和和该列的总和都可以通过传入总数据到方法或 filter 后计算得出，也是动态的。

<tr>
  <td>{{countJinE(data)}}</td>
  ...
</tr>

Answer 2

可以给你的input上加上事件

// template 部分代码

<el-input v-model="address.jine" @change="getAmount(index)" placeholder="请输入内容" class="inLine"></el-input>

// 给你写个简单列子 js方法 me.listAdress 这个是存放table的数组
getAmount (index) {
//                取得当前下标之前的参数
                let me = this
                let totalAmout = 0
                debugger
                for (let i = 0; i <= index; i++){
                    // 这边可以计算结果出每行的结果
                    totalAmout += Number( me.listAdress[i].jine)
                }
                console.log(totalAmout)
            },

Answer 3

你的表格是v-for生成的吗

 <button @click="addnewTr"></button>
    <tr v-for="(item,index) in trs" :key="index">
        <td><input type="text"></td>
        <td><input type="text"></td>
    </tr>
    tr=[...]

 addnewTr(){
       this.trs.push(..)
   }

比如这样