vue+element-ui怎么实现导入导出功能
这篇文章主要介绍了vue+element-ui怎么实现导入导出功能的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue+element-ui怎么实现导入导出功能文章都会有所收获,下面我们一起来看看吧。
创新互联公司是专业的成安网站建设公司,成安接单;提供网站设计、成都网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行成安网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
安装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怎么实现导入导出功能”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注创新互联行业资讯频道。
文章名称:vue+element-ui怎么实现导入导出功能
网站链接:http://myzitong.com/article/ijjsie.html