前言
众所周知，ElementUI,是一个比较完善的UI库，但是使用它需要有一点vue的基础。在开始本文的正文之前，我们先来看看安装的方法吧。
安装ElementUI模块
在main.js中引入
全局安装
当我们安装完记得重新运行，cnpm run dev ，现在就可以直接使用elementUI了。
vue + element-ui导入导出功能
1.前段后台管理系统中数据展示一般都是用表格,表格会涉及到导入和导出;
2.导入是利用element-ui的Upload 上传组件;
上传的路径
:name ="name"//上传的文件字段名
:headers="importHeaders"//请求头格式
:on-preview="handlePreview"//可以通过 file.response 拿到服务端返回数据
:on-remove="handleRemove"//文件移除
:before-upload="beforeUpload"//上传前配置
:on-error="uploadFail"//上传错误
:on-success="uploadSuccess"//上传成功
:file-list="fileList"//上传的文件列表
:with-credentials="withCredentials">//是否支持cookie信息发送
3.导出是利用file的一个对象blob;通过调用后台接口拿到数据,然后用数据来实例化blob,利用a标签的href属性链接到blob对象
{
//创建一个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文件)
导入失败
失败原因
- 错误：{{error.column}},{{error.value}},{{error.errorInfo}}
