elementUI el-table 合計行 滾動條放在下方樣式與合計行統計方法

CSSjavascript

/*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;
}

  合計行統計方法:css

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){ // if(column.property == 'money'){}
                            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;
            },
相關文章
相關標籤/搜索