6、Element-ui el-table合计属性summary-method的使用，以及合计行样式自定义

根据自己的合计逻辑，使用element官方的合计属性summary-method并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中，具体看以下代码

//汇总
        getSummaries({ columns, data }) {
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '汇总';//可更改合计行的名称
                    return;
                }
                const values = data.map(item => {
                    return Number(item[column.property])//property为表头的prop值
                });
                // every() 方法用于检测values数组所有元素是否都符合指定条件（通过函数提供）
                if (!values.every(value => isNaN(value))) {
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr);//Number转换为数值
                        let sum =Number(Number(prev) + Number(curr)).toFixed(2);//toFixed(2)数据项保留两位小数
                        if (!isNaN(value)) {
                            return sum;
                        } else {
                            return prev;
                        }
                    }, 0);
                    sums[index] += 'MW';//给合计项添加单位MW
                } else {
                    sums[index] = '';
                }
            });
            return sums;//返回sums数组,sums数组中各项就会显示在合计行的各列中
        },

官方默认合计行在表格尾部展示，以下为更改合计行的位置，放表格的首行位置，通过css实现

//  /deep/ 为深度操作符，可以穿透到子组件
            /deep/ .el-table {
                display: flex;
                flex-direction: column;
            }
            //  order默认值为0，只需将表体order置为1即可移到最后，这样合计行就上移到表体上方
            /deep/ .el-table__body-wrapper {
                order: 1;
            }