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 win 7透明弹出层效果的简单代码
Aug 06 Javascript
移动手机APP手指滑动切换图片特效附源码下载
Nov 30 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
深入理解Vue.js源码之事件机制
Sep 27 Javascript
vue-cli 引入、配置axios的方法
May 08 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
Aug 13 Javascript
vue-cli3脚手架的配置及使用教程
Aug 28 Javascript
vue 的点击事件获取当前点击的元素方法
Sep 15 Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 26 Javascript
微信小程序实现简单的select下拉框
Nov 23 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
关于我转生变成史莱姆这档事:第二季PV上线,萌王2021年回归
2020/05/06 日漫
PHP音乐采集(部分代码)
2007/02/14 PHP
php下删除字符串中HTML标签的函数
2008/08/27 PHP
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
php动态变量定义及使用
2015/06/10 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
PHP实现函数内修改外部变量值的方法示例
2018/12/28 PHP
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
2016/01/19 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
JavaScript浮点数及运算精度调整详解
2016/10/21 Javascript
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
React性能优化系列之减少props改变的实现方法
2019/01/17 Javascript
详解使用uni-app开发微信小程序之登录模块
2019/05/09 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
微信小程序 button样式设置为图片的方法
2020/06/19 Javascript
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
Python+Django搭建自己的blog网站
2018/03/13 Python
解决python线程卡死的问题
2019/02/18 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
Django Rest framework解析器和渲染器详解
2019/07/25 Python
Python dict的常用方法示例代码
2020/06/23 Python
pytorch 计算Parameter和FLOP的操作
2021/03/04 Python
html5时钟实现代码
2010/10/22 HTML / CSS
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2014/07/21 面试题
群众路线批评与自我批评
2014/02/06 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
刘胡兰观后感
2015/06/16 职场文书
2016年暑期社会实践活动总结报告
2016/04/06 职场文书
python中print格式化输出的问题
2021/04/16 Python