vue element.ui 自定义表格，某行数据里的多个input怎么自动相加

Question

vue element.ui 自定义表格，某行数据里的多个input里的价格，自动相加，计算出总价
如图：

代码：
http://jsrun.net/IBhKp/embedd...

Answer 1

// html
<input v-model="scope.row.time" type="text" class="plan-input" style="width: 50px">次 = {{calculateTotal(scope.row)}}元

// js
methods: {
    //删除某个项目的报价
    delete_offer:function(index){
        vm.offer.splice(index,1)
    },
    calculateTotal: function (row) {
        row.total_price = row.price * row.number * row.time
      return row.total_price
    }
}

Answer 2

这设计有问题，总价的结果应该是计算出来的值，而非一个单独的字段。
要么把总价的字段去掉，改为计算属性，
要么监听其他输入框的数据变化，手动修改总价的值

Answer 3

建议：单独一个组件，实现相加的功能