Vue + Element UI｜可随商品单价和数量实时更新总价的表格

引入Element UI可参考文章
如何在Vue项目引入Element UI
Element UI官网

效果

编辑表格中的单价和采购数量，总金额、商品总价、合计金额可以同步变化。点击测试按钮在控制台打印表格数据源tableData也同步更新。

源代码

<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <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-number v-model="scope.row.number"></el-input-number>
        </template>
      </el-table-column>          
      <el-table-column sortable label="总金额">
        <template slot-scope="scope">
        {{ (scope.row.price * scope.row.number).toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small"  @click="handleTest(scope.row, scope.$index)">测试</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="line-height:30px;">
      商品总价：<span>{{ goodsTotalPrice }}</span>
    </div>
    <div style="line-height:30px;">
      商品运费：<input v-model="freight">
    </div>
    <div style="line-height:30px;">
      合计金额：<span>{{ totalPrice.toFixed(2) }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          price: '1',
          number: 1,
        }, 
        {
          price: '2',
          number: 1,
        }, 
        {
          price: '3',
          number: 1,
        }, 
        {
          price: '4',
          number: 1,
        }
      ],
      freight: '10',
    };
  },
  computed: {
   // 商品总价
    goodsTotalPrice(){
      const total = this.tableData.map((row) => row.number * row.price).reduce((total, num) => total + num);
      return total;
    },
    // 合计金额
    totalPrice() {
			return parseFloat(this.freight) + this.goodsTotalPrice;
		},
  },
  methods: {
    handleTest(row, index) {
      console.log(row, index);
      console.log(this.tableData);
    },
  },
};
</script>