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 相关文章推荐
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
Aug 29 Javascript
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 Javascript
jQuery javaScript捕获回车事件(示例代码)
Nov 07 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
Jun 26 Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
Feb 19 Javascript
js实现功能比较全面的全选和多选
Mar 02 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 Javascript
浅析node应用的timing-attack安全漏洞
Feb 28 Javascript
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 Javascript
H5+css3+js搭建带验证码的登录页面
Oct 11 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也可以?成Shell Script
2006/10/09 PHP
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
php去除html标记的原生函数详解
2015/01/27 PHP
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
2013/04/26 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
无限树Jquery插件zTree的常用功能特性总结
2014/09/11 Javascript
javascript引用类型之时间Date和数组Array
2015/08/27 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
详解Vue 事件驱动和依赖追踪
2017/04/22 Javascript
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
不得不知的ES6小技巧
2018/07/28 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
python使用urllib2提交http post请求的方法
2015/05/26 Python
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
python 返回列表中某个值的索引方法
2018/11/07 Python
python使用PyQt5的简单方法
2019/02/27 Python
python conda操作方法
2019/09/11 Python
python获取响应某个字段值的3种实现方法
2020/04/30 Python
Python pymysql模块安装并操作过程解析
2020/10/13 Python
Django框架请求生命周期实现原理
2020/11/13 Python
sort命令的作用和用法
2013/08/25 面试题
管理科学大学生求职信
2013/11/13 职场文书
迷你西餐厅创业计划书范文
2013/12/31 职场文书
即兴演讲稿
2014/01/04 职场文书
餐饮管理自我介绍信
2014/01/15 职场文书
会计学自我鉴定
2014/02/06 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
药店收银员岗位职责
2015/04/07 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
党小组意见范文
2015/06/08 职场文书
导游词之阳朔遇龙河
2019/12/16 职场文书
Django migrate报错的解决方案
2021/05/20 Python
MySQL系列之十一 日志记录
2021/07/02 MySQL