vue el-table表格计算小计

所要实现的效果图：输入单价，数量后自动算出小计的结果。下面的运费和其他费用只要编辑，合计就会自己得出。

  <el-table
            :data="tableData"
            border             
            style="width: 100%">
          <el-table-column
            label="商品"
            >
             <template slot-scope="scope" >
                <div>
                  <span class="head_pic"> <img :src="scope.row.sku.sku_pic_json[0].src" width="60" height="60"/></span>
                  <span style="display:block">{{scope.row.sku.asin}}</span>
                  <span style="display:block">{{scope.row.sku.product.name_cn}}</span>
                </div>
              </template>
          </el-table-column>
            <el-table-column
            prop="price"
            label="单价">
            <!-- <template slot-scope="scope" >
                <el-input v-model="scope.row.price"></el-input>
            </template> -->
            </el-table-column>
            <el-table-column 
            sortable
            label="采购数量"
            prop="number">
              <!-- <template slot-scope="scope">
                <el-input v-model="scope.row.number"></el-input>
              </template> -->
            </el-table-column>          
            <el-table-column
            sortable
            label="小计">
              <template slot-scope="scope">
              {{ (scope.row.sum = scope.row.price *scope.row.number) | keepTwoNum}}
              </template>
            </el-table-column>
            <el-table-column
                  align="center"
                  label="操作"
                  >
                  <template slot-scope="scope">
                    <el-button type="primary" size="small"  @click="showEditDialog(scope.row,scope.$index)" :disabled="disabled">编辑</el-button>
                    <el-button type="danger" size="small"  @click="deleteTable(scope.row,scope.$index)" :disabled="disabled">删除</el-button>
                  </template>
            </el-table-column>
        </el-table>
      
        <div style="text-align:right;line-height:30px;">
          运费：<input v-model="freight" :disabled="disabled">
        </div>
        <div style="text-align:right;line-height:30px;">
          其他费用：<input v-model="other" :disabled="disabled">
        </div>
        <div style="text-align:right;line-height:30px;margin-right:119px;">
          <!-- 合计：<input v-model="sum" :disabled="disabled"> -->
          合计：<span :disabled="disabled" >{{sums.toFixed(2)}}</span>
        </div>

里面有个keepTwoNum的方法，用来筛选保留数据后两位小数，防止数据失去精度的情况

  filters: {
      keepTwoNum(value){
        value = Number(value);
        return value.toFixed(2)
      }
    },

表格中所有的金额小计在创建的时候就开始计算。reduce就是将小计金额进行累加

 computed: {
   //表格中的金额合计总价格
    sumMoney(){
				return this.tableData.map(
					row=>row.number*row.price).reduce(
					(acc, cur) => (parseFloat(cur) + acc), 0)
      },
      //所有费用合计
    sums:function () {
				return parseFloat(this.freight)+parseFloat(this.other) +this.sumMoney
					},
  }

sums就是所要获得的合计值。