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 实现复杂表头和动态增加列的二维表格功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法

    在开发中,需要表格控件根据浏览器高度进行调整,固定表头,且然后多余的出滚动条,官方给出的: 只要在el-table元素中定义了height属性,即可实现固定表头的表格,而不需要额外的代码. 然后直接上template代码: <template> <el-table :data="tableData3" height="250" border style="width: 100%"> <el-table-column

  • 详解Vue Elementui中的Tag与页面其它元素相互交互的两三事

    前言 公司系统在用elementui做后台开发,不免遇到一些需要自己去根据原有的功能上,加一些交互的功能. 今天来介绍下我在用elementUi里的Tag标签与多选框交互的过程,东西听上去很简单,但就是越简单的东西越容易出一些问题.官方tag文档:elementUi-tag标签 效果图: 思路 一.多选框勾选,出现对应的tag: 1.利用watch监听多选框绑定的值A(数组)的变化: 2.根据A的变化,循环拿到勾选多选框的id对应的name,将id以及对应的name组成新的对象数组: 3.将上一

  • Vue项目查看当前使用的elementUI版本的方法

    在我们引入elementUI的时候,一般是两种方式:npm安装或者在script直接引入: 当然,在script直接引入的时候,我们也可以通过直接指定版本的方式,达到锁定版本的效果. <script src="//unpkg.com/element-ui@2.3.8/lib/index.js"></script> 直接引入是从外网引入,每次加载都是读取外部网站,我们大部分开发者可能使用的是npm安装的方式,采用这种方式引入的时候,elementUI会保存在vue

  • vue elementUI tree树形控件获取父节点ID的实例

    首先找到element-ui.common.js文件 如下 具体看你工程下的node_modules D:\workSpace\vue_manage\node_modules\element-ui\lib\element-ui.common.js 找到getCheckedNodes该方法 细节如下我的该方法在21618行 TreeStore.prototype.getCheckedNodes = function getCheckedNodes() { var leafOnly = argume

  • 浅谈Vue render函数在ElementUi中的应用

    vue的render函数在日常开发中被广泛应用,今天以ElementUI中的table表头重构为引,实际应用一下借助render函数实现表头搜索,不足之处请多多指教! 首先引入官方demo <el-table :data="tableData" style="width: 100%" :border="true"> <el-table-column prop="date" label="日期&quo

  • VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解

    VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解

    先看看ElementUI里关于el-table的template数据结构: <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-tabl

  • vue使用ElementUI时导航栏默认展开功能的实现

    本文主要参考: http://element.eleme.io/#/zh-CN/component/menu 在使用elementUI的时候发现,能够展开的导航栏是不能展开的,效果这里先不演示了.可以在上边的网站上看到. 现在有这样的需求,就是说,默认的时候需要展开这些导航,就是一打开界面的时候就能够显示导航里面的菜单内容. 具体操作是这样的: <script src="//unpkg.com/vue/dist/vue.js"></script> <scr

  • 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=

  • vue elementUI table 自定义表头和行合并的实例代码

    最近项目中做表格比较多,对element表格的使用,只需要传递进去数据,然后写死表头即可渲染. 但现实中应用中,如果写死表头,并且每个组件中写自己的表格,不仅浪费时间而且消耗性能.这个时候需要动态渲染表头. 而官方例子都是写死表头,那么为了满足项目需求,只能自己来研究一下. 1.自定义表头 代码如下,其实就是分了两部分,表格主数据是在TableData对象中,表头的数据保存在headerDatas,headerDatas.label其实就是表头的值,如果表头是"序号",那么header

  • vue+elementUI组件递归实现可折叠动态渲染多级侧边栏导航

    vue+elementUI组件递归实现可折叠动态渲染多级侧边栏导航

    早就实现了功能,但是发现点击的时候,选中的菜单项背景色会变白,周五时候仔细观察了一下,发现并不是调整样式的问题,而是选项没有被选中,于是好好研究了一下组件递归这块,总结记录一下心路历程 一.概念 递归:递归其实说白了,就是自己调用自己,样子就像是套娃一个套一个的,小时候玩过一个游戏汉诺塔就是利用的递归原理: 函数递归:函数利用函数名还调用自己 组件递归:所以组件递归利用的是vue组件中的name属性来实现的 二.需求 实现可折叠动态渲染多级侧边栏导航 三.分析 1.观察到侧边栏导航是一级一级的,

  • Python使用MyQR制作专属动态彩色二维码功能

    Python中有一个非常有趣好玩的库MyQR,不仅可以制作各种漂亮的二维码,还可以生成动态彩色二维码. MyQR是一个能够生成自定义二维码的第三方库,你可以根据需要生成普通二维码.带图片的艺术二维码,也可以生成动态二维码. 生成动态二维码 效果图如下: 二维码扫描上图看看 我们首先要安装MyQR库,直接用pip3 install myqr(or MyQR).需要注意的是MyQR依赖于Python3,在Python2的环境下可能无法正常运行. 这个库提供了两种使用方法,一种是直接使用命令行的方式,

  • Vue实现手机扫描二维码预览页面效果

    本文实例为大家分享了Vue实现手机扫描二维码预览页面的具体代码,供大家参考,具体内容如下 背景:vue-cli3 + ant-design-vue 搭建的后台管理系统 需求:实现扫描二维码即可在手机预览H5页面功能 使用插件:qrcode step1:安装插件 npm install qrcode --save step2:引入插件 在项目中新建QRcode.vue文件 <template> <div id="qrCode"> <div id="

  • vue简单的二维数组循环嵌套方式

    vue简单的二维数组循环嵌套方式

    目录 二维数组循环嵌套方式 vue循环数组.循环嵌套数组v-for 利用Vue循环输出标签 前端页面输出循环嵌套数组 二维数组循环嵌套方式 <div class="box">   <div class="color">      <div>蓝色/尺码</div>   </div>   //这是简单的布局 .box{     border: 1px solid red;     display: flex;

  • vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信

    父组件 定义表头和表内容 data(){ return{ // 表格数据 tableColumns: [], // 表头数据 titleData:[], } } 引入并注册子组件 import TableComponents from "../../components/table/table"; //注册子组件table components: { tableC: TableComponents }, 获取表头和表内容数据.(真实数据应该是从接口获取的,由于是测试数据这里我先写死)

  • vue+element-ui动态生成多级表头的方法

    vue+element html配置: <div id="table">{{tableData}} <el-table :data="tabledata01" :span-method="tableSpanMethod" max-height="420"> <el-table-column v-for='item in tableConfig' :label="item.label&qu

  • vue+elementUI动态增加表单项并添加验证的代码详解

    vue+elementUI动态增加表单项并添加验证的代码详解

    参考elementUI官网以及网上的其他一些资料.话不多说,直接贴代码. htmt部分: <div id="app" style="width: 500px;">         <el-form :model="environmentForm" ref="environmentForm">             <el-row :gutter="24" v-for=&quo

  • 基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)

    基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)

    前言 开发过程中遇到了一个需求,根据用户选择的联系方式,动态改变输入框的检验条件,并且整个表单是可以增加的 在线访问:动态表单校验 github(欢迎star): https://github.com/Mrblackant. .. 思考几个问题 1.整个表单是可新增的,所以要遍历生成: 2.联系方式(手机/座机)的切换,是要切换后边不同类型输入框还是只改变校验规则(本篇是动态改变校验规则) 实现 1.elementui的form表单实现校验的时候要给当前el-form-item加上prop属性,

随机推荐