Vue怎么导出Excel功能


这篇文章主要讲解了“Vue怎么导出Excel功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue怎么导出Excel功能”吧!1.点击页面中导出按钮(注册点击事件)2.事件回调里面,发送请求后台数据3.对后台数据进行处理,完成想要的效果4.生成Excel文件将其插件包复制粘贴到自己项目下的src文件夹下面注:大概率会报错,这个阶段出啥错基本都是依赖没安装,都装上就好了npm install file-saver script-loader –save当我们正式点击`导出`按钮之后,才去加载vendor文件夹中的Export2Excel模块Excel导出参数说明注意:到这里为止,其实已经完成了简单的导出效果,用的是自己写的假数据。实际项目中肯定是拿的后台返回的数据,并且要对格式做修改,达到我们想要的效果(真测试了,上面的步骤跟着做就可完成。) 效果如下:比如说后台返回的表头是英文需要转化成中文,然后格式不是插件要的格式。后台返回数据:需要将key转成中文,将value抓换成数组。header = [待会将英文的表头转成中文的,是个数组的形式]如下代码所示效果:后台返回数组,定义one是第一个数据,目的是以第一个数据为样本设置表头,如果第一条数据是false的话,说明后台啥也没返回,那就全剧终。如下代码所示效果:01 `Object.keys(one) ` 这个是遍历对象取出key组成一个数组。02 ` map` 方法遍历对每一个项进行做事返回一个数组03 `return map[key] ` 可以看做 map.id = “编号”(便于理解);map方法不停的对map对象做事而map[key]其实就是值,如 ‘编号”、‘部门”… 然后组成一个数组 如:[“姓名”, “工资”]目标:后台返回正式员工和非正式员工用1和2表示,我们需要将数字转成文字,并且需要让他们变成数组的格式。01-首先后台返回的Obj[“formOfEmployment”]是数字1 , 2 我们要他们变成—> “正式”, “非正式”02-obj[“formOfEmployment”] = hireTypEnmu[key] 这段代码意思是将汉字设置给左边的数字,免费云主机域名实现替换。我们分别看左右代表什么。03- obj[“formOfEmployment”] 此时是数字04-hireTypEnmu:{1:”正式”, “2”:”非正式” }这是我们自己定义的对象05-hireTypEnmu[key] –key是数字–所以他是value是汉字如下代码所示效果:将处理好的数据返回这个时候,将这个函数拿到回调函数里面,header和data的数据之前已经有了。完成代码如下:以上代码经过测试,可以直接使用达成效果。附:vue-element-admin码云拉取,这个版本是二次开发功能多的那款感谢各位的阅读,以上就是“Vue怎么导出Excel功能”的内容了,经过本文的学习后,相信大家对Vue怎么导出Excel功能这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是百云主机,小编将为大家推送更多相关知识点的文章,欢迎关注!

相关推荐: MySQL慢查询日志如何配置

这篇文章主要讲解了“MySQL慢查询日志如何配置”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“MySQL慢查询日志如何配置”吧!MySQL的慢查询日志是MySQL提供的一种日志记录,它用来记录在MySQL中响应…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 07/20 10:26
下一篇 07/20 10:26

相关推荐