How to realize the Import and Export function of vue+element-ui

这篇文章主要介绍了vue+element-ui怎么实现导入导出功能的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue+element-ui怎么实现导入导出功能文章都会有所收获，下面我们一起来看看吧。

安装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}} import * as scheduleApi from '@/api/schedule'export default { data() { return { tableData3: [ { date: "2016-05-03", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄" }, { date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄" }, { date: "2016-05-04", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄" }, { date: "2016-05-01", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄" }, { date: "2016-05-08", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄" }, { date: "2016-05-06", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄" }, { date: "2016-05-07", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄" } ], multipleSelection: [], importUrl:'www.baidu.com',//后台接口config.admin_url+'rest/schedule/import/' importHeaders:{ enctype:'multipart/form-data', cityCode:'' }, name: 'import', fileList: [], withCredentials: true, processing: false, uploadTip:'点击上传', importFlag:1, dialogImportVisible:false, errorResults:[] }; }, methods: { toggleSelection(rows) { if (rows) { rows.forEach(row => { this.$refs.multipleTable.toggleRowSelection(row); }); } else { this.$refs.multipleTable.clearSelection(); } }, handleSelectionChange(val) { //复选框选择回填函数,val返回一整行的数据 this.multipleSelection = val; }, importData() { this.importFlag = 1 this.fileList = [] this.uploadTip = '点击上传' this.processing = false this.dialogImportVisible = true }, outportData() { scheduleApi.downloadTemplate() }, handlePreview(file) { //可以通过 file.response 拿到服务端返回数据 }, handleRemove(file, fileList) { //文件移除 }, beforeUpload(file){ //上传前配置 this.importHeaders.cityCode='上海'//可以配置请求头 let excelfileExtend = ".xls,.xlsx"//设置文件格式 let fileExtend = file.name.substring(file.name.lastIndexOf('.')).toLowerCase(); if (excelfileExtend.indexOf(fileExtend) { //创建一个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怎么实现导入导出功能"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。