vue + element ui 表格怎样计算某一列的和？

Question

使用element ui 怎样计算得出特定列的和，查看文档之后找不到适合的方法，百思不得其解。

Answer 1

{
// 省略若干字段
computed: {
    // 省略若干字段
    columnTotal() {
        // tableData - 表格数据（按实际情况修改）
        // calcCol - 要计算的那一列（按实际情况修改）
        // map函数 - 将表格的二维数据转换为一维的数组
        // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
        // reduce函数 - 对数组做累加
        // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
        return tableData.map(row => row.calcCol).reduce((acc, cur) => (cur + acc), 0)
    }
}
}

var tableData = [ {calcCol: 1, b: 2}, {calcCol: 2, b: 3}, {calcCol:3, c: 4} ]
var total = tableData.map(row => row.calcCol).reduce((acc, cur) => (cur + acc), 0)
// total === 6

Answer 2

有这个功能来着

Answer 3

今天看了好多文章，悄咪咪的回答一下。

---

HTML 片段：
<el-table

  ref="multipleTable"
  :data="list"
  border
  :summary-method = 'getSum'
  show-summary
  tooltip-effect="dark"
  style="width: 100%;margin-top: 20px">
  // 这是需要计算合计的那一列
   <el-table-column
    prop="presentUnitPrice"
    label="实际支付（¥）">
  </el-table-column>
</el-table>

js 片段
getSum(param) {
    const { columns, data} = param
    const sums = []
    columns.forEach((column, index) => { //这步是为了让最后一行出现 合计 这一行，并且最后一行第一列出现 合计 二字。合计的字可以在这里更改
      if (index === 0) {
        sums[index] = '合计'
        return
      }
      switch (column.property) {
        case 'presentUnitPrice':    //这里是需要计算的列所绑定的prop的值
          sums[index] = (this.orderAmountTotal) + '元' //这是计算公式，因为我是直接拿值，所以可以直接填
          break
        default: //这个默认不要忘记写
          break
      }
    })
    return sums
  }