Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面来@源gao*daima.com搞@代#码网端UI框架,手机端有对应框架是 Mint UI，下面这篇文章主要给大家介绍了关于利用vue + element-ui如何实现简洁的导入导出功能的相关资料，需要的朋友可以参考下。
前言
众所周知，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文件)
<div> {{ scope.row.date }} <div style="margin-top: 20px"> 切换第二、第三行的选中状态取消选择导入导出</div><!-- 导入 --> <div> <!-- 是否支持发送cookie信息 -->{{uploadTip}}<div class="el-upload__tip">只能上传excel文件</div><div class="download-template"> <i class="icon-download"></i>下载模板</div></div><div> <div class="failure-tips"> <i class="el-icon-warning"></i>导入失败</div><div class="failure-reason"> <h4>失败原因</h4><ul> <li>第{{error.rowIdx + 1}}行，错误：{{error.column}},{{error.value}},{{error.errorInfo}}</li></ul></div></div><!-- 导出 --></div> .hide-dialog{ display:none; }
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实现简洁的导入导出功能的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue + element-ui实现简洁的导入导出功能
转载请注明原文链接：vue + element-ui实现简洁的导入导出功能
