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

数据格式:

表头的数据取出:

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

  

Vue+elementui 实现复杂表头和动态增加列的二维表格的更多相关文章

  1. WPF datagrid 动态增加列

    DataGrid动态增加列 <Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.m ...

  2. c++ 依据输入动态声明数组(一维,二维)

    较早的编译器是不同意这样做的,所以一些书籍比方以Tc解说的书本都说数组的下标不能是变量.在vc6.0下亦是如此. 只是在一些较新的编译器如dev c++已经支持了,例如以下代码不会报错 #includ ...

  3. ecshop增加pc扫描二维码微信支付功能代码

    ecshop开发网站,如果没有手机版,又想通过微信支付,可以加入pc二维码扫描微信支付功能 工具/原料 ecshop商城系统,phpqrcode,WxPayPubHelper 公众号已申请微信支付 方 ...

  4. 基于Vue element-ui实现支持多级纵向动态表头的仿表格布局

    [本文出自天外归云的博客园] 需求图示如下,多级纵向动态表头表格: 我的思路是用element-ui的layout实现,做出一个仿造表格,能够支持动态的.多级的.纵向的表头: <template ...

  5. jqGrid动态增加列,使用在根据条件筛选而出现不同的列的场景

    function GetGrid2() { var jqdata = [ { Encode:"20180100", FullName: "BYD", SpecT ...

  6. mysql 动态增加列,查找表中有多少列,具体什么列。 通过JSON生成mysql表 支持子JSON

    好消息, 程序员专用早餐机.和掌柜说 ideaam,可以节省20元. 点击链接  或復·制这段描述¥k3MbbVKccMU¥后到淘♂寳♀ 或者 淘宝扫码 支持下同行哈 ---------------- ...

  7. 使用JQuery,动态增加列

    这也是我在自己学做网站时无意搞出来的,希望可以对别人有所启发 <%@ page language="java" import="java.util.*" ...

  8. C++二维数组动态内存分配

    对于二维数组和二维指针的内存的分配 这里首选说一下一维指针和一维数组的内存分配情况. 一维: 数组:形如int  a[5];这里定义了一个一维数组a,并且数组的元素个数是5,这里的a是这五个元素的整体 ...

  9. C++中动态申请二维数组并释放方法

    C/C++中动态开辟一维.二维数组是非常常用的,以前没记住,做题时怎么也想不起来,现在好好整理一下. C++中有三种方法来动态申请多维数组 (1)C中的malloc/free (2)C++中的new/ ...

随机推荐

  1. linux运维、架构之路-禅道环境搭建

    一.介绍            禅道项目管理软件是国产的开源项目管理软件,专注研发项目管理,内置需求管理.任务管理.bug管理.缺陷管理.用例管理.计划发布等功能,实现了软件的完整生命周期管理. 禅道 ...

  2. Spring read-only="true" 只读事务的一些概念

    概念:从这一点设置的时间点开始(时间点a)到这个事务结束的过程中,其他事务所提交的数据,该事务将看不见!(查询中不会出现别人在时间点a之后提交的数据) 应用场合: 如果你一次执行单条查询语句,则没有必 ...

  3. Move Controller UE4键位

    工作中需要,就总结了一下,如下图:

  4. [BZOJ2822]:[AHOI2012]树屋阶梯(卡特兰数)

    题目传送门 题目描述 暑假期间,小龙报名了一个模拟野外生存作战训练班来锻炼体魄,训练的第一个晚上,教官就给他们出了个难题.由于地上露营湿气重,必须选择在高处的树屋露营.小龙分配的树屋建立在一颗高度为N ...

  5. gsxt滑动验证码

    最后,谈谈滑动验证码. 目前,工商网站已经全面改版,全部采用了滑动验证码,上面绝大多数思路都失效了.对于滑动验证码,网上能搜到的解决方案基本都是下载图片,还原图片,算出滑动距离,然后模拟js来进行拖动 ...

  6. requirejs define a module

    https://requirejs.org/docs/api.html#define Define a Module § 1.3 A module is different from a tradit ...

  7. vue引入静态js文件

    由于一些演示,需要对编码名称等可快速进行修改,需要页面方便配置.由于build后的vue项目基本已经看不出原样,因此需要创建一个文件,并在打包的时候不会进行编译. vue-cli 2.0的作法是在st ...

  8. 模拟赛DAY 2 T2不老梦

    [题目背景] 于万人中万幸得以相逢,刹那间澈净明通. 成为我所向披靡的勇气和惶恐,裂山海,堕苍穹. 爱若执炬迎风,炽烈而哀恸,诸般滋味皆在其中. 韶华宛转吟诵,苍凉的光荣,急景凋年深情难共. ——银临 ...

  9. SynchronousQueue 源码分析

    SynchronousQueue SynchronousQueue 能解决什么问题?什么时候使用 SynchronousQueue? 1)SynchronousQueue 没有任何内部容量. 2)Sy ...

  10. 记2018最后一次问题诊断-Spark on Yarn所有任务运行失败

    2018的最后一个工作日,是在调式和诊断问题的过程中度过,原本可以按时下班,毕竟最后一天了,然鹅,确是一直苦苦挣扎. 废话不多说,先描述一下问题:有一套大数据环境,是CDH版本的,总共4台机子,我们的 ...