Vue+elementui 实现复杂表头和动态增加列的二维表格功能
时间:2019-09-23
本文章向大家介绍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 实现复杂表头和动态增加列的二维表格功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
- Springboot @RequestBody 传递 List
- 零基础学编程013:import让你飞起来
- 【教程】利用Tensorflow目标检测API确定图像中目标的位置
- 零基础学编程012:画出复利曲线图
- OpenAI发布高度优化的GPU计算内核—块稀疏GPU内核
- SQL SERVER 原来还可以这样玩 FOR XML PATH
- 零基础学编程011:复利数据表问题(总结)
- 一个小程序引发的思考
- 深入内核:DUMP Block的数据读取与脏数据写入影响
- 零基础学编程010:最终可以输出完整的复利数据表了
- 在C#使用文件监控对象FileSystemWatcher 实现数据同步
- 零基础学编程018:条件语句
- 零基础学编程022:函数的世界
- 帝国cms如何调用指定id的文章到首页?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 5分钟Flink - 流处理API转换算子集合
- 视频上云/网络穿透/网络映射服务EasyNTS前端组织添加页面出现Vue冲突怎么解决?
- Pinpoint 一款强大的APM工具
- 1. Pandas系列 - 基本数据结构
- 6 年前,只会 JSP 和 Servlet 就可以找到工作
- Python文件处理实用指南
- 2. Pandas系列 - Series基本功能
- 1.3 广告算法专题 - 交叉验证
- 最好用的内网穿透工具合集
- JVM垃圾回收之垃圾回收器,程序员必须掌握的知识
- 5分钟Flink - 时间与语义案例详解
- 5分钟Flink - 时间语义和Watermark
- 3. Pandas系列 - DataFrame操作
- 4. Pandas系列 - 基本功能和统计操作
- 面经手册 · 第8篇《LinkedList插入速度比ArrayList快?你确定吗?》