vue element-ui table表格自定义纵向合计横向合计

1表格横向数据合计

表格代码

     <el-table-column prop="" label="合计">
                   <template slot-scope="scope">
                        <div>
                            {{ total[scope.$index] }}
                        </div>
                   </template>
      </el-table-column>

js代码

我是拿到每一行数据，留下自己想合计的数据进行·求和

                   let totalNum = []
                    //拿到数组想要的数值进行合计
                    res.data.tableData.forEach(item => {
                        let newArr = []
                        for (let k in item) {
                            if (k !== 'bodyId') {
                                newArr.push(item[k])
                            }
                        }
                        var values = newArr.map(Number)
                        //删除NaN值
                        values = values.delNaN()
                        totalNum.push((eval(values.join("+"))).toFixed(2));
                    })
                    this.total = [...totalNum];

到这里横向自定义合计就完成了，下面是自定义合计行。

后端在列表里面每一个种类已经返回了一个小的合计，我需要求每个小合计的总合计

总合计合计行并没有计算自定义合计列

代码

getSummers(param) {
            const { columns, data } = param;//这里可以看出，自定义函数会传入每一列，以及数据
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '总合计';
                    return;
                } else if (index >= 2) { //index>=2后的列进行求和               
                    //页面分别统计 处理
                    let totalArr = []
                    // 只统计小合计所有数据
                    data.map(item => {
                        if (item['科室单元名称'].slice(-2) == '合计') {
                            totalArr.push(item)
                        }
                    })
                    const values = totalArr.map(item => Number(item[column.property]));
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        //此处结合了方式一的判断处理，实现多种条件处理
                        //此处的column.property获取的值对应<el-table-column>中prop对应的字段
                        switch (column.property) {
                            case "total1":
                            case "total2":
                            case "total3":
                                return sums[index] = parseFloat(sums[index]).toFixed(2);
                                break;
                        }

                    } else {
                        sums[index] = ''; //如果列的值有一项不是数字，就显示这个自定义内容
                    }
                } else {
                    sums[index] = '--'
                }
            });
            // 自定义表头纵向合计最后一个总合计
            //数组字符串转数组number类型
            let vals = sums.map(Number);
            //删除NaN
            vals = vals.delNaN();
            const a = eval(vals.join("+"))
            //替换最后一位
            sums.splice(sums.length - 1, 1, a);
            // 保留小数点后两位
            sums.forEach((item, index) => {
                if (typeof item === 'number') {
                    sums[index] = item.toFixed(2)
                }
            })
            return sums;//最后返回合计行的数据
        },

我们自己拿到返回的sums进行相加在替换掉最后一个。

本人是个菜鸟，有写的不对，不合理的地方请多多指教。