Vue + elementui implement complex header and dynamic increase of two-dimensional table columns

First on the finished renderings: the column is increased according to the results of a query

 Data Format:

 Extracting header data:

data.data.forEach (Element => { 
          this.thead.push ({ 
            name: element name. 
            surface access: element surface access. 
            lotno: element.LOT 
          });

　element table中：

      <el-table-column
        v-for="(item,index) in thead"
        :prop="item.LOTNO"
        :key="index"
        align="center"
        width="180"
      >
        <template slot="header">
          <tr>
            <td>{{item.品名}}</td>
          </tr>
          <tr>
            <td>{{item.面取数}}</td>
          </tr>
          <tr>
            <td @click="querylot(item.LOTNO)">
              <el-link>{{item.LOTNO}}</el-link>
            </td>
          </tr>
        </template>
      </el-table-column>

　　Consolidation within the data table:

  for (let index1 = 3;. index1 <Object.keys ( result of the _data [0]) length; index1, ++) { 
          the let new new newMap the Map = (); 
          the let DataKey = Object.keys (Results _data [0]) [index1 ]; 
          newmap.set ( "MODE", DataKey); // for each extracted key array object 
          for (let index2 = 0; index2 < results _data_length; index2 ++) { 
            the let = DataValue results _data [index2] [object .keys (result the _data [0]) [index1,]]; 
            IF (DataKey == "input date") { 
              DataValue datavalue.slice = (0, 10); 
            } 
            newmap.set ( 
              results _data [index2] [Object .keys (results _data [index2]) [0] ], datavalue); // get all the key values corresponding 
          }

　　The combined header left: Note that, when there is a need to set a fixed table columns max-height attribute, otherwise there will be a blank column

    <el-table :data="tableData" span-method="objectSpanMethod">

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % this.tableData.length === 0) {
          return {
            rowspan: this.tableData.length,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    }

　　Export table:

import FileSaver from "file-saver";
import XLSX from "xlsx";
    output() {
      alert(1);
      let wb = XLSX.utils.table_to_book(document.querySelector("#mytable")); //mytable为表格的id名
      let wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          "sheet.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    }