vue+ element-ui el-table组件合计行自定义合并（summary-method）

随笔记录：

今天接到的需求中有个表格的合并行需要同时用到大写和小写；

金额过大时，当前行定义的sum[5]单价列会自动换行；

 没有百度到合适的方法；

后来用别的方式改造

  // 这里是官方的合计方法
     getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        if (index === 7) {
           sums[index] = "小写";
          return;
        }
      const values = data.map((item) => {
          if (column.property == "合计") {
            return Number(item[column.property]);
          }
        });

         if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
                 return prev;
            }
          }, 0);
          sums[index] = Math.floor(sums[index] * 100) / 100;
          sums[index] += "";
        }
      });
      sums[8] = sums[6] ? sums[6] : "";
      sums[6] = "";
      sums[5] = this.convertCurrency(sums[8] / 1);
      this.合计 = sums[8] ? Number(sums[8]) : 0;
        // 在执行栈最后加入重建合计行后合并行
        // 需要在
       this.$nextTick(() => {
         const tds = document.querySelectorAll(
           "#table .el-table__footer-wrapper tr>td"
         );
         // colSpan合并列
         tds[1].colSpan = 6;
         tds[0].style.textAlign = "center";
         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";
      // });
      return sums;
      },

改造后的样式 

 原代码出自这里：

elementui中table的合计功能、以及合计行合并_强壮的糙汉子的博客-CSDN博客_element table 合计