javascript - 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

这篇关于javascript - vue + element ui 表格怎样计算某一列的和？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！