el-table合计行合并

效果如下 因为合计el-table的合并方法是不生效的,所以需要修改css下手

watch: { // 应急物资的合计合并 planData: { immediate: true, handler() { setTimeout(() => { const tds = document.querySelectorAll( ".pro_table .el-table__footer-wrapper tr>td" ); tds[0].colSpan = 7; tds[0].style.textAlign = "center"; tds[1].style.display = "none"; tds[2].style.display = "none"; tds[3].style.display = "none"; tds[4].style.display = "none"; tds[5].style.display = "none"; tds[6].style.display = "none"; }, 0); }, }, }, // 合计行方法 getSummaries(param) { const { columns, data } = param; const sums = []; columns.forEach((column, index) => { if (index === 0) { sums[index] = "合计"; return; } const values = data.map((item) => Number(item[column.property])); if ( !values.every((value) => isNaN(value)) && (index === 7 || index === 8) ) { sums[index] = values.reduce((prev, curr) => { const value = Number(curr); if (!isNaN(value)) { return prev + curr; } else { return prev; } }, 0); sums[index] += ""; } else { sums[index] = ""; } }); // 将合计结果返回，是一个数组，每个位置的值与表格的列一一对应 return sums; },