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

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

回答:

{
// 省略若干字段
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

回答:

clipboard.png
有这个功能来着

回答:

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


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
  }

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注