Element的表格el-table合计显示多行，以及合计行合并单元格

效果展示

一、合计显示多行

此处采用换行的思路，让页面上显示多行，使用到html的换行符<br/>

步骤1：el-table标签加上方法:summary-method="getSummaries"

<el-table
      id="table"
      :data="tableList"
      border
      :summary-method="getSummaries"
      show-summary
    >

步骤2：getSummaries方法下的具体实现

1.换行主要代码：sums[index] =  <p>当前页面总计<br/><br/>总计</p>;

2.合计第一行可显示页面原本相加的合计值，第二行显示后端动态数据返回的值，主要代码：
if (column.property == 'total') {
    sums[index] = <p>
      {countArr[index]}<br/><br/>//第一行数据是当前页面值相加
       {this.apiData.account}<br/><br/>//第二行数据是后端接口返回
       </p>
}

getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          // 通过<br/>实现换行，达到2行的效果
          sums[index] =  <p>当前页面总计<br/><br/>总计</p>;
          return;
        }
        
        let countArr = [];//element原本的总计：当前页面计算的值 集合
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          countArr[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          // 根据列表字段判断 取值
          if (column.property == 'total') {
            sums[index] = <p>
                {countArr[index]}<br/><br/>//第一行数据是当前页面值相加
                {this.apiData.account}<br/><br/>//第二行数据是后端接口返回
              </p>
          }
        } else {
          sums[index] = "-";
        }
      });
      return sums;
    },

注意：直接在vue页面写jsx语法有可能会报错，此时需要安装@vue/babel-preset-jsx插件

npm install @vue/babel-preset-jsx --save

安装好后在.babelrc文件下新增配置，@vue/babel-preset-jsx，然后重新运行代码就可以了

{
  "presets": [
    ["@babel/preset-env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "@vue/babel-preset-jsx" //支持jsx语法
  ]
}

此时页面效果，已有2行，但未合并单元格

二、合计行合并单元格

通过监听表格数据，获取到表格合计行的dom节点，进行dom操作，setTimeout表示等页面渲染完后在进行操作，表格如果有固定列，使用下面的代码，没有固定列，使用注释的那一行代码

watch: {
    tableList: {// 表格数据
      immediate: true,
      handler() {
        setTimeout(() => {
          // const tds = document.querySelectorAll('#table .el-table__footer-wrapper tr>td');//表格没有固定列时 写法
          const tds = document.querySelectorAll('#table .el-table__fixed-footer-wrapper tr>td');//表格有固定列时 写法
          tds[0].colSpan = 2;
          tds[0].style.textAlign = 'center'
          tds[1].style.display = 'none'
        }, 0)
      }
    }
  },