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>            <tdaddy外国老爷爷异性tvd>{{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.t("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);            }            ne就业补助wmap.t(              结果_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          };        } el {          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.querylector("#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;    }