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) {

//                取得当前下标之前的参数

                let me = this

                let totalAmout = 0

                debugger

                for (let i = 0; i <= index; i++){

                    // 这边可以计算结果出每行的结果

                    totalAmout += Number( me.listAdress[i].jine)

                }

                console.log(totalAmout)

            },

Answer 2

你的表格是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(..)

   }

比如这样