效果如下

注意!!! 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;
    },

手动分割_________________________________________________________________________________________________

案例2

    <div class="tableBox" ref="tableBox">
      <el-table
        class="table pro_table"
        :data="tableData"
        :max-height="tableHeight"
        border
        ref="table"
        tooltip-effect="dark"
        style="width: 100%"
        :header-cell-style="headFirst"
        show-summary
        :summary-method="getSummaries"
      >
        <el-table-column
          align="left"
          label="日期"
          prop="dateTime"
          width="140"
          show-overflow-tooltip
        />
        <el-table-column
          v-for="item in headerList"
          :key="item.index"
          :label="item.lable"
          align="center"
        >
          <el-table-column
            align="center"
            v-for="val in item.children"
            :key="val.id"
            :prop="val.props"
            :label="val.lable"
            :min-width="val.lable == '次数' ? 80 : 140"
          >
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>

模拟数据

 headerList: [
        {
          lable: "张三",
          props: "name",
          id: 1,
          children: [
            { lable: "时间", props: "zstimes", id: 2 },
            { lable: "次数", props: "zscs", id: 3 },
          ],
        },
        {
          lable: "李四",
          props: "name",
          id: 4,
          children: [
            { lable: "时间", props: "lstimes", id: 5 },
            { lable: "次数", props: "lscs", id: 6 },
          ],
        },
        {
          lable: "王五",
          props: "name",
          id: 7,
          children: [
            { lable: "时间", props: "wwtimes", id: 8 },
            { lable: "次数", props: "wwcs", id: 9 },
          ],
        },
      ],
      tableData : [
        {
          zstimes: "（时间段、时间段、时间段）",
          zscs: 1,
          lstimes: "（时间段、时间段、时间段）",
          lscs: 2,
          wwtimes: "（时间段、时间段、时间段）",
          wwcs: 1,
        },
        {
          zstimes: "（时间段、时间段、时间段）",
          zscs: 2,
          lstimes: "（时间段、时间段、时间段）",
          lscs: 4,
          wwtimes: "（时间段、时间段、时间段）",
          wwcs: 1,
        },
       
      ]

// methods里面

  // 合并表头
    headFirst({ row, colunm, rowIndex, columnIndex }) {
      if (row[0].level == 1) {
        for (let i = 0; i < row.length; i++) {
          //这里有个非常坑的bug 必须是row[0]=0 row[1]=2才会生效
          row[1].rowSpan = 0; // 这行我使用的时候注释掉也可以
          if (i > 1) {
            row[i].rowSpan = 2;
          }
        }
      }
    },
    // 合计行合并
    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))) {
          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;
    },

 watch: {
    // 应急物资的合计合并
    tableData: {
      immediate: true,
      handler() {
        setTimeout(() => {
          const tds = document.querySelectorAll(
            ".pro_table .el-table__footer-wrapper tr>td"
          );
          for (let i = 0; i < tds.length; i++) {
            const element = tds[i];
            element.style.textAlign = "right";
            if (i > 0 && i % 2 === 1) {
              tds[i + 1].colSpan = 2;
              element.style.display = "none";
            }
          }
          tds[0].style.fontWeight = 700;
          tds[0].style.color = "#000";
        }, 0);
      },
    },
  },