elementUI el-table 合计行 滚动条放在下方样式与合计行统计方法

时间:2023-01-26 22:57:41

CSS

/*table一条合计行滚动条样式*/
.el-table{
    overflow: auto;
}
.el-table .el-table__body-wrapper,
.el-table .el-table__header-wrapper,
.el-table .el-table__footer-wrapper{
    overflow: visible;
}
.el-table::after{
    position:relative !important;
}

  合计行统计方法:

getSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '合计';
                        return;
                    }
                    const values = data.map(item => {
                        return Number(item[column.property])
                    });
                    const flag = values.every(value => {
                        if(index == 3){
                            return true
                        }else{
                            return isNaN(value)
                        }
                    })
                    if (!flag) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[index] += '';
                    }
                });

                return sums;
            },