Elementui table cell merge and table header cell merge

The page looks like this

HTML section of code

 <base-table
          default-height="true"
          class="numTable sorTable noTableBorder"
          :border-style="true"
          :columns="column"
          :data-source="numTable"
          :loading="loading"
          :layout="layout ? layout : `total, prev, pager, next, jumper`"
          :span-method="cellMerge"
          :header-cell-style="headMerge"
          :cell-style="cellStyleMerge"
        >
        </base-table>
Copy the code

Js part

// Call this method after obtaining the derivative data
getSpanArr(data) {
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          // Determine whether the current element is the same as the previous one
          if (data[i].productType === data[i - 1].productType) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i; }}}},cellMerge({ row, column, rowIndex, columnIndex }) {
      let isMerge = -1;
      if (row.productType === row.column) {
        isMerge = (rowIndex) ;
      }
      if (columnIndex === 0) {
        // The first column of the first and second rows merges the second column
        if (
          rowIndex === Number(isMerge)
          // rowIndex === this.qmTable.length - 1
        ) {
          return {
            rowspan: 1.colspan: 2
          };
        } else {
          const _row = this.spanArr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col }; }}else if (
        columnIndex === 1 &&
        rowIndex === Number(isMerge)
      ) {
        // The first and second rows corresponding to the second column disappear
        return {
          rowspan: 0.colspan: 0}; }},Copy the code

Table header merge processing

headMerge({ row, column, rowIndex, columnIndex }) { if (rowIndex === 1) { if (columnIndex === 0 || columnIndex === 1) { return { display: 'none' }; } } if (rowIndex === 0) { if (columnIndex === 0) { this.$nextTick(() => { if (document.getElementsByClassName(column.id).length ! == 0) { document .getElementsByClassName(column.id)[0] .setAttribute('rowSpan', 3); return false; }}); return column; }}Copy the code

Table headers are delimited by slashes

.el-table thead.is-group tr:first-of-type th:first-of-type { border-bottom: none; } .el-table thead.is-group tr:first-of-type th:first-of-type::before { position: absolute; top: 0; left: 0; display: block; width: 1px; height: 106px; /* Width and height of td */ content: "; background-color: #f2f2f2; / / opacity: 0.3; transform: rotate(-66deg); /* transform-origin: top; } .el-table thead.is-group tr:last-of-type th:first-of-type::before { position: absolute; right: 0; bottom: 0; display: block; width: 1px; height: 105px; /* According to td width and height */ content: ""; background-color: #f2f2f2; / / opacity: 0.3; transform: rotate(-68deg); /* transform-origin: bottom; // background:red; } ` `Copy the code