vue+element-ui如何实现导入导出功能
小编给大家分享一下vue + element-ui如何实现导入导出功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
赤壁网站制作公司哪家好,找创新互联!从网页设计、网站建设、微信开发、APP开发、响应式网站开发等网站项目制作,到程序开发,运营维护。创新互联自2013年起到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联。
前言
众所周知,ElementUI,是一个比较完善的UI库,但是使用它需要有一点vue的基础。在开始本文的正文之前,我们先来看看安装的方法吧。
安装ElementUI模块
cnpm install element-ui -S
在main.js中引入
import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css'
全局安装
Vue.use(ElementUI)
当我们安装完记得重新运行,cnpm run dev
,现在就可以直接使用elementUI了。
vue + element-ui导入导出功能
1.前段后台管理系统中数据展示一般都是用表格,表格会涉及到导入和导出;
2.导入是利用element-ui的Upload 上传组件;
//是否支持cookie信息发送
3.导出是利用file的一个对象blob;通过调用后台接口拿到数据,然后用数据来实例化blob,利用a标签的href属性链接到blob对象
export const downloadTemplate = function (scheduleType) { axios.get('/rest/schedule/template', { params: { "scheduleType": scheduleType }, responseType: 'arraybuffer' }).then((response) => { //创建一个blob对象,file的一种 let blob = new Blob([response.data], { type: 'application/x-xls' }) let link = document.createElement('a') link.href = window.URL.createObjectURL(blob) //配置下载的文件名 link.download = fileNames[scheduleType] + '_' + response.headers.datestr + '.xls' link.click() }) }
4.贴上整个小demo的完整代码,在后台开发可以直接拿过去用(vue文件)
{{ scope.row.date }} 切换第二、第三行的选中状态 取消选择 导入 导出 {{uploadTip}} 只能上传excel文件导入失败失败原因
- 第{{error.rowIdx + 1}}行,错误:{{error.column}},{{error.value}},{{error.errorInfo}}
5.js文件,调用接口
import axios from 'axios' // 下载模板 export const downloadTemplate = function (scheduleType) { axios.get('/rest/schedule/template', { params: { "scheduleType": scheduleType }, responseType: 'arraybuffer' }).then((response) => { //创建一个blob对象,file的一种 let blob = new Blob([response.data], { type: 'application/x-xls' }) let link = document.createElement('a') link.href = window.URL.createObjectURL(blob) link.download = fileNames[scheduleType] + '_' + response.headers.datestr + '.xls' link.click() }) }
以上是“vue + element-ui如何实现导入导出功能”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
本文题目:vue+element-ui如何实现导入导出功能
浏览地址:http://myzitong.com/article/peeohe.html