区块狗系统开发

区块狗系统开发（T：I8O*285IO282V 林楠）
Vue+elementui 实现复杂表头和动态增加列的二维表格
先上完成的效果图：列是根据查询结果增加的

数据格式：

表头的数据取出：

1
2
3
4
5
6
data.data.forEach(element => {

     this.thead.push({
       品名: element. 品名,
       面取数: element. 面取数,
       LOTNO: element.LOT
     });

element table 中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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>
表格内数据整理：

1
2
3
4
5
6
7
8
9
10
11
12
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">

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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
      };
    }
  }
}

表格导出：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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;
}