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;},