vue.js - element-UI el-table 的合计功能

问题描述

问 题

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

解决方案

我是这样改的，重新组合了一下数据，也不需要: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>

这篇关于vue.js - element-UI el-table 的合计功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！