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 相关文章推荐
让getElementsByName适应IE和firefox的方法
Sep 24 Javascript
ExtJS Grid使用SimpleStore、多选框的方法
Nov 20 Javascript
js实现的点击数量加一可操作数据库
May 09 Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 Javascript
Google 地图获取API Key详细教程
Aug 06 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
微信小程序实现自定义加载图标功能
Jul 19 Javascript
vue el-table实现行内编辑功能
Dec 11 Javascript
利用JS如何获取form表单数据
Dec 19 Javascript
js实现带搜索功能的下拉框
Jan 11 Javascript
JS严格模式原理与用法实例分析
Apr 27 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提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
2011/02/08 PHP
PHP创建桌面快捷方式的实例代码
2014/02/17 PHP
PHP实现文件上传功能实例代码
2017/05/18 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
JavaScript 基础篇(一)
2012/03/30 Javascript
Jvascript学习实践案例(开发常用)
2012/06/25 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
jQuery中empty()方法用法实例
2015/01/16 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
2015/08/21 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
jQuery生成假加载动画效果
2016/12/01 Javascript
详解jQuery事件
2017/01/13 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
vue-router 组件复用问题详解
2018/01/22 Javascript
jQuery实现获取动态添加的标签对象示例
2018/06/28 jQuery
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
Python 文件操作技巧(File operation) 实例代码分析
2008/08/11 Python
python 基础教程之Map使用方法
2017/01/17 Python
Python通过matplotlib绘制动画简单实例
2017/12/13 Python
Tensorflow中使用tfrecord方式读取数据的方法
2018/06/19 Python
Python2.7版os.path.isdir中文路径返回false的解决方法
2019/06/21 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
什么是python的id函数
2020/06/11 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
python 实现Harris角点检测算法
2020/12/11 Python
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
《与朱元思书》的教学反思
2014/04/17 职场文书
党员目标管理责任书
2014/07/25 职场文书
经营场所使用证明
2015/06/19 职场文书
Linux、ubuntu系统下查看显卡型号、显卡信息详解
2022/04/07 Servers
Java无向树分析 实现最小高度树
2022/04/09 Javascript