首页 > 其他分享 >vue-element-admin table表格导出(含踩坑)

vue-element-admin table表格导出(含踩坑)

时间:2022-11-29 17:14:10浏览次数:45  
标签:vue const 必填 admin 导出 element Export2Excel vendor data

步骤一:安装插件

npm install xlsx file-saver -S

npm install script-loader -S -D

步骤二:在src新建目录vendor

在vendor新建文件Export2Excel.js

然后将链接中的代码复制到Export2Excel.js

https://github.com/PanJiaChen/vue-element-admin/edit/master/src/vendor/Export2Excel.js

注意:作者用的import 导入,在我的项目中打印XLSX一直是undefined,所以我用了下面的方式

import { saveAs } from 'file-saver' // import XLSX from 'xlsx'  const XLSX = require('xlsx');   步骤三:在vue中使用   methods: {     exporfFile(){         import('@/vendor/Export2Excel').then(excel => {             // 导出的表头名信息,也就是选中列             const tHeader = [                 '序号',                 '企业名称',                 '区县',                 '管理类别',                 '行业类别',                 '申请类型',                 '开始时间',                 '结束时间',                 '时长',             ]             // 导出的表头字段名,需要导出表格字段名             const filterVal = [                 'index',                 'devcompany',                 'name_regiondetail',                 'management',                 'hyname',                 'itemtype',                 'start_time',                 'end_time',                 'time',             ]
            //导出时如果需要序列,增加序列。             this.tableData1.forEach((item, index) => {                 item.index = index + 1             })             const list = this.tableData1             const data = this.formatJson(filterVal, list)
            excel.export_json_to_excel({                 header: tHeader, //表头 必填                 data, //具体数据 必填,字段名必须用data                 filename: 'excel-list', //非必填,自定义                 autoWidth: true, //非必填                 bookType: 'xlsx' //非必填             })         })     },     //处理数据格式将[{}……]处理为@/vendor/Export2Excel需要的[[]……]格式     formatJson(filterVal, jsonData) {         return jsonData.map((v) => filterVal.map((j) => v[j]))     }, }       注意:数组的格式为数组套数组,且tHeader 元素的数量要和data中列的数量一致,且传递时注意,上面对象中橙色的属性data,一定要用'data'这个字段名,否则传递过去是undefined。   data的格式如下: [

[1, '标题一 'George',111]

[2, '标题二', 'John', 2614,]

[3, '标题三', 'Jennifer', 4787, ]

]

 

标签:vue,const,必填,admin,导出,element,Export2Excel,vendor,data
From: https://www.cnblogs.com/ommph/p/16935905.html

相关文章

  • vue2生命周期
    1.有哪些生命周期:beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyed2.一旦进入页面或组件会执行哪些生命周期:beforeCreatecrea......
  • Vue基础
     1、内容渲染指令1.v-text指令:覆盖元素内部原有的内容。2.{{}}插值表达式:是内容的占位符,不会覆盖原有内容。3.v-html指令:吧带有标签的字符串,渲染成真正的HTML内容。2......
  • Invalid options in vue.config.js: "before" is not allowed
    这个问题已解决,webpack的版本不同导致的,需要把vue.config.js中before改成onBeforeSetupMiddleware,并且到index.js中的app.use改为app.app.use,即可完美解决。   ......
  • element下拉组件改变下拉箭头图标
    想改啥样式就改成对应的编码.el-cascader{.el-input__icon:before{content:'\e790';}}.el-select{.el-select__caret:before{content:'\e7......
  • axios拦截code码,错误处理。vue2版本
    直接上代码importaxiosfrom'axios'import{Notification}from'element-ui';constrequest=axios.create({timeout:10000})//response拦截器获取后......
  • vue组件之间的传参
    vue组件之间传参有三种传参方式'父传子','子传父','非父子组件之间传值'父传子父组件<template><CounterCom:num="5"></CounterCom></template><script>impo......
  • nodejs版本升级到18后,无法启动和打包vue2项目
    引言最近在升级nodejs版本到v18.7.0后启动项目报digitalenveloperoutines::unsupported,经过多方查找最终找到解决方法,特写下此篇原因node.js的版本问题因为node.js......
  • vue m3u8 视频流 hls
    参考:https://blog.csdn.net/a15297701931/article/details/115478652cnpmhls.js<videoref="videoElement"id="videoElement"......
  • xml_解析_Jsoup_Document对象以及Element对象
    xml_解析_Jsoup_Document对象Document:文档对象,代表内存中的dom树获取Element对象getElementById(Stringid):根据id属性值获取唯一的element对象ge......
  • 搞懂vue3的ref、reactive、toRef、toRefs
    首先需要明确这四个函数都是用于在setup中创造响应式变量的。四个函数都需要从vue中导出:import{ref,reactive,toRef,toRefs}from'vue'总结:reactive对比ref从......