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 相关文章推荐
JavaScript获取页面上某个元素的代码
Mar 13 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
Apr 14 Javascript
Javascript Object 对象学习笔记
Dec 17 Javascript
javascript实现的右下角弹窗实例
Apr 24 Javascript
直接拿来用的页面跳转进度条JS实现
Jan 06 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
Jun 22 Javascript
jquery validation验证表单插件
Jan 07 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
Apr 25 Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 Javascript
vue路由守卫及路由守卫无限循环问题详析
Sep 05 Javascript
如何实现echarts markline标签名显示自己想要的
Jul 20 Javascript
react ant Design手动设置表单的值操作
Oct 31 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
一个高ai的分页函数和一个url函数
2006/10/09 PHP
PHP微信开发之文本自动回复
2016/06/23 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
QQ登录简单实现代码
2021/03/09 Javascript
javascript读取xml
2006/11/04 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
2011/10/23 Javascript
jquery实现简单的表单验证
2015/11/17 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
第一次动手实现bootstrap table分页效果
2016/09/22 Javascript
JavaScript生成.xls文件的代码
2016/12/22 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
Angular2使用jQuery的方法教程
2017/05/28 jQuery
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
js html实现计算器功能
2018/11/13 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
Python模块学习 datetime介绍
2012/08/27 Python
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
Python中if elif else及缩进的使用简述
2018/05/31 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
手把手教你实现一个canvas智绘画板的方法
2019/03/04 HTML / CSS
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
PyQt 如何创建自定义QWidget
2021/03/24 Python
党员创先争优公开承诺书
2014/03/28 职场文书
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
经销商年会策划方案
2014/05/29 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
物业工程部岗位职责
2015/02/11 职场文书
浅谈golang 中time.After释放的问题
2021/05/05 Golang
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers