element-ui实现导入导出

这次给大家带来element-ui实现导入导出，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文件)

      {{ 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) <= -1) {   this.$message.error('文件格式错误')   return false  }  this.uploadTip = '正在处理中...'  this.processing = true }, //上传错误 uploadFail(err, file, fileList) {  this.uploadTip = '点击上传'  this.processing = false  this.$message.error(err) }, //上传成功 uploadSuccess(response, file, fileList) {  this.uploadTip = '点击上传'  this.processing = false  if (response.status === -1) {  this.errorResults = response.data  if (this.errorResults) {   this.importFlag = 2  } else {   this.dialogImportVisible = false   this.$message.error(response.errorMsg)  }  } else {  this.importFlag = 3  this.dialogImportVisible = false  this.$message.info('导入成功')  this.doSearch()  } }, //下载模板 download() {  //调用后台模板方法,和导出类似  scheduleApi.downloadTemplate() }, }};.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()  }) }

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

推荐阅读：

Angular验证功能实现步奏

JS实现单例模式的步奏详解

以上就是element-ui实现导入导出的详细内容，更多请关注【创想鸟】其它相关文章！