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 相关文章推荐
js获取单元格自定义属性值的代码(IE/Firefox)
Apr 05 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
Sep 21 Javascript
jQuery源码解读之addClass()方法分析
Feb 20 Javascript
JQuery导航菜单选择特效
Apr 11 Javascript
node.js插件nodeclipse安装图文教程
Oct 19 Javascript
详解React中的组件通信问题
Jul 31 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 Javascript
Node调用Java的示例代码
Sep 20 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
Dec 07 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
详解Require.js与Sea.js的区别
Aug 05 Javascript
js实现删除li标签一行内容
Apr 16 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根据分类合并数组的方法实例详解
2013/11/06 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
PHP children()函数讲解
2019/02/03 PHP
语义化 H1 标签
2008/01/14 Javascript
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
javascript跨域刷新实现代码
2011/01/01 Javascript
setTimeout的延时为0时多个浏览器的区别
2012/05/23 Javascript
基于jquery &amp; json的省市区联动代码
2012/06/26 Javascript
正则表达式搭配js轻松处理json文本方便而老古
2013/02/17 Javascript
JS获取浏览器语言动态加载JS文件示例代码
2014/10/31 Javascript
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
JS双击变input框批量修改内容
2016/12/12 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
常用jQuery选择器汇总
2017/02/02 Javascript
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
es6学习之解构时应该注意的点
2017/08/29 Javascript
JointJS JavaScript流程图绘制框架解析
2019/08/15 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
浅谈python迭代器
2017/11/08 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
HTML5 video 事件应用示例
2014/09/11 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
关键字final的用法
2013/10/02 面试题
经典c++面试题六
2012/01/18 面试题
贷款委托书
2014/08/01 职场文书
助人为乐好少年事迹材料
2014/08/18 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
学习退步检讨书
2014/09/28 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
党员思想汇报材料
2014/12/19 职场文书
男人帮观后感
2015/06/18 职场文书
入团申请书格式
2019/06/20 职场文书
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python