element-UI el-table 的合计功能

Question

https://jsfiddle.net/fag8xy88/ 怎么算出正确的合计总额？

Answer 1

我是这样改的，重新组合了一下数据，也不需要:formatter了，希望对你有帮助

 data() {
  return {
    tableData6: [{
      id: '12987122',
      price: 10,
      amount: 23,
    }, {
      id: '12987122',
      price: 12,
      amount: 12,
    }, {
      id: '12987122',
      price: 3,
      amount: 20,
    }]
  };
},

computed:{
  tableData() {
    this.tableData6.map((v,i)=>{
      v.sum=v.price*v.amount;
    });
    return this.tableData6
  }
},

<div id="app">
  <template>
    <el-table :data="tableData" border="" height="200"  :summary-method="getSummaries"
      show-summary style="width: 100%; margin-top: 20px">
      <el-table-column prop="id" label="ID" width="180">
      </el-table-column>
      <el-table-column prop="price" label="单价">
      </el-table-column>
      <el-table-column prop="amount" label="数量">
      </el-table-column>
      <el-table-column prop="sum" label="总额">
      </el-table-column>
    </el-table>
  </template>
</div>

Answer 2

https://jsfiddle.net/fag8xy88/1/

改动的地方

<el-table-column prop="sum" label="总额">
     <template scope="scope">
       {{scope.row.sum = scope.row.price * scope.row.amount}}
     </template>
    </el-table-column>

改得比较简单粗暴

Answer 3

楼主那个提问时，点击预览是真么做的啊，求指教

https://jsfiddle.net/1f6ym25f/1/

Answer 4

https://jsfiddle.net/1f6ym25f/1/ 仅供参考