vue如何将v-for中的表格导出来
时间:2019-04-14
本文章向大家介绍vue如何将v-for中的表格导出来,主要包括vue如何将v-for中的表格导出来使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、需要安装以下依赖
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中的表格导出来,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- ASP.NET MVC的Razor引擎:RazorViewEngine
- 算法:求解AOE网的关键路径
- 编程小技巧:多态原理
- ASP.NET Core的配置(4):多样性的配置来源[下篇]
- 数据结构 图
- ASP.NET Core的配置(5):配置的同步[ 实例篇]
- TensorFlow 深度学习笔记 卷积神经网络
- 利用EntLib授权机制实现对ASP.NET页面的自动授权
- ASP.NET Core的配置(5):配置的同步[设计篇]
- 详解Redis内部运作机制
- TensorFlow深度学习笔记 循环神经网络实践
- 从客户端Web应用程序访问Bluemix服务
- 云改变传统银行业面貌的5种方式
- ASP.NET MVC中的ActionFilter是如何执行的?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- springboot之相关环境设置
- springboot之第一个springboot程序
- 「查缺补漏」巩固你的RocketMQ知识体系
- springboot之场景启动器
- ICLR2020 | 深度自适应Transformer
- springboot之自动配置
- golang--连接redis数据库并进行增删查改
- golang--redis连接池
- springboot配置之使用application.properties时编码问题
- mybatis动态sql之foreach补充(二)
- golang数据结构之稀疏数组
- mybatis扩展之使用PageHelper插件进行分页(是真好用)
- 动态规划--0,1背包问题(再也不怕类似背包问题了)
- springboot配置之Profile多环境支持
- LeetCode | 102.二叉树的层次遍历