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


Posted in Javascript onSeptember 23, 2019

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

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

 数据格式:

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

总结

以上所述是小编给大家介绍的Vue+elementui 实现复杂表头和动态增加列的二维表格功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery下为Event handler传递动态参数的代码
Jan 06 Javascript
jQuery实用函数用法总结
Aug 29 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
用window.onerror捕获并上报Js错误的方法
Jan 27 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
Feb 05 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
May 17 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 Javascript
深入理解bootstrap框架之入门准备
Oct 09 Javascript
flexslider.js实现移动端轮播
Feb 05 Javascript
canvas 实现中国象棋
Feb 17 Javascript
vue2.0移除或更改的一些东西(移除index key)
Aug 28 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 #Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 #Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 #jQuery
vue2.0+SVG实现音乐播放圆形进度条组件
Sep 21 #Javascript
js+springMVC 提交数组数据到后台的实例
Sep 21 #Javascript
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 #jQuery
vue实现文件上传读取及下载功能
Nov 17 #Javascript
You might like
php查询whois信息的方法
2015/06/08 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
PHP命令空间namespace及use的用法小结
2017/11/27 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
2018/05/12 PHP
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
2013/08/01 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
javascript判断数组内是否重复的方法
2015/04/21 Javascript
jQuery实现的placeholder效果完整实例
2016/08/02 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
JavaScript动态绑定详解
2017/09/14 Javascript
详解Webpack实战之构建 Electron 应用
2017/12/25 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
nodejs各种姿势断点调试的方法
2020/06/18 NodeJs
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
python数字图像处理实现直方图与均衡化
2018/05/04 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
python使用Plotly绘图工具绘制水平条形图
2020/03/25 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
canvas小画板之平滑曲线的实现
2020/08/12 HTML / CSS
英国足球店:UK Soccer Shop
2017/11/19 全球购物
工程造价专业大学生自荐信
2013/10/01 职场文书
小学门卫岗位职责
2013/12/17 职场文书
继承权公证书范本
2015/01/23 职场文书
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫