vue如何将v-for中的表格导出来


Posted in Javascript onMay 07, 2018

一、需要安装以下依赖

npm install -S file-saver xlsx
 npm install -D script-loader

二、项目中新建一个文件夹:(vendor---名字任取)

里面放置两个文件Blob.js和 Export2Excel.js。

三、在.vue文件中

     写这两个方法:其中list是表格的内容           

//export2Excel是你点击导出所绑定的方法名

export2Excel() {



require.ensure([], () => {




const { export_json_to_excel } = require('../../vendor/Export2Excel');//其中自己的路径也要注意下




const tHeader = ['序号', 'IMSI', 'MSISDN', '证件号码', '姓名'];//表格的头的名称




const filterVal = ['ID', 'imsi', 'msisdn', 'address', 'name'];//对应的内容的名字,一定要一 一 对应




const list = this.tableData;//tableData是你表单所绑定的数据名称,一定要对应




const data = this.formatJson(filterVal, list);




export_json_to_excel(tHeader, data, '列表excel');//列表excel这个是导出以后表格的名称,根据需要自行更改



})


},


formatJson(filterVal, jsonData) {



return jsonData.map(v => filterVal.map(j => v[j]))


}

总结

以上所述是小编给大家介绍的vue如何将v-for中的表格导出来,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery Tools tab使用介绍
Jul 14 Javascript
js中call与apply的用法小结
Dec 28 Javascript
关于JavaScript命名空间的一些心得
Jun 07 Javascript
浅谈javascript中的instanceof和typeof
Feb 27 Javascript
JavaScript实现简单获取当前网页网址的方法
Nov 09 Javascript
封装属于自己的JS组件
Jan 27 Javascript
使用node.js中的Buffer类处理二进制数据的方法
Nov 26 Javascript
微信小程序中吸底按钮适配iPhone X方案
Nov 29 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
JSON.stringify()方法讲解
Jan 31 Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
浅谈Vue 数据响应式原理
May 07 #Javascript
浅谈Vue响应式(数组变异方法)
May 07 #Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 #Javascript
详解JavaScript的BUG和错误
May 07 #Javascript
vue实现个人信息查看和密码修改功能
May 06 #Javascript
基于vue-element组件实现音乐播放器功能
May 06 #Javascript
VueJs组件之父子通讯的方式
May 06 #Javascript
You might like
PHP curl实现抓取302跳转后页面的示例
2014/07/04 PHP
PHP实现的自定义数组排序函数与排序类示例
2016/11/18 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
django中的ajax组件教程详解
2018/10/18 PHP
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
json-lib出现There is a cycle in the hierarchy解决办法
2010/02/24 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
javascript时区函数介绍
2012/09/14 Javascript
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
利用jQuery实现可输入搜索文字的下拉框
2013/10/23 Javascript
js左右弹性滚动对联广告代码分享
2014/02/19 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
Ajax 加载数据 练习代码
2017/01/05 Javascript
jQuery Tree Multiselect使用详解
2017/05/02 jQuery
JS轮播图实现简单代码
2021/02/19 Javascript
详解JS函数stack size计算方法
2018/06/18 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
python使用webbrowser浏览指定url的方法
2015/04/04 Python
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
python取均匀不重复的随机数方式
2019/11/27 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
GoDaddy英国:全球排名第一的域名注册商
2018/06/08 全球购物
大学生写自荐信的技巧
2014/01/08 职场文书
客服专员岗位职责
2014/02/28 职场文书
《守株待兔》教学反思
2014/03/01 职场文书
对孩子的寄语
2014/04/09 职场文书
二年级上册数学教学计划
2015/01/20 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
《观察物体》教学反思
2016/02/17 职场文书
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS