Vue+elementui 实现复杂表头和动态增加列的二维表格

先上完成的效果图：列是根据查询结果增加的

 数据格式：

 表头的数据取出：

 data.data.foreach(element => {
          this.thead.push({
            品名: element.品名,
            面取数: element.面取数,
            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>

　　表格内数据整理：

  for (let index1 = 3;index1 < object.keys(结果_data[0]).length;index1++) {
          let newmap = new map();
          let datakey = object.keys(结果_data[0])[index1];
          newmap.set("mode", datakey); //取出每个数组对象的键值
          for (let index2 = 0; index2 < 结果_data_length; index2++) {
            let datavalue = 结果_data[index2][object.keys(结果_data[0])[index1]];
            if (datakey == "投入日期") {
              datavalue = datavalue.slice(0, 10);
            }
            newmap.set(
              结果_data[index2][object.keys(结果_data[index2])[0]],datavalue);//获得这个键对应的所有的值
          }

　　左侧表头合并：需要注意的是，当有固定列的时候需要设置表格的max-height属性，不然会出现列空白

    <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
          };
        }
      }
    }

　　表格导出：

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;
    }