当前位置: 萬仟网 > IT编程>网页制作>Html5 > Vue+elementui 实现复杂表头和动态增加列的二维表格

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

2019年09月23日 16:49  | 萬仟网IT编程  | 我要评论

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

 数据格式:

 表头的数据取出:

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

  

 

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

◎已有 0 人评论

Copyright © 2019  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com