效果图(实际效果图内含隐私信息,故只展现excel表,与效果图样式一致):

代码:

 <el-table
              v-if="isShow"
              :data="tableData"
              stripe
              size="small"
              row-key="index"
              height="1000"
              :header-cell-style="rowClass"
              :span-method="objectSpanMethod"
              style="width: 100%; margin: 20px 0px">
              <!-- <el-table-column
                  label="报表"
                  align="center"
                  min-width="150"> -->
              <el-table-column
                label="月份"
                align="center"
                min-width="380">
                <el-table-column
                  prop="category"
                  min-width="120">
                </el-table-column>
                <el-table-column
                  prop="type"
                  min-width="260">
                </el-table-column>
              </el-table-column>
 </el-table>

合并表头方法:

 rowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0 && columnIndex === 0) {
        this.$nextTick(() => {
          if (document.getElementsByClassName(column.id).length !== 0) {
            document.getElementsByClassName(column.id)[0].setAttribute('rowSpan', 2)
            return false
          }
        })
      }
      if (rowIndex === 1 && (columnIndex === 0 || columnIndex === 1)) {
        return { display: 'none' }
      }
    },

单元格行合并方法:

 objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === 0 || row.category !== this.tableData[rowIndex - 1].category) {
          const rowCount = this.tableData.filter(i => i.category === row.category).length
          return { rowspan: rowCount, colspan: 1 }
        } else {
          return { rowspan: 0, colspan: 0 }
        }
      }

      return { rowspan: 1, colspan: 1 }
    },