业务需求：(具体可根据业务需要进行修改)
1.将列表数据导出
2.本地数据导入
处理流程
1.提取后端接口
2.前台逻辑梳理
3.功能实现
上图所示为项目结构，FileUpLoad为导入导出组件，export-excel-dialog为导出后显示的选项弹框，UseFileDetail为实际项目中包含导入导出组件的父级页面，App.vue为路由出口文件。
<template> <div id="file"> <transition enter-active-class="animate__animated animate__wobble" leave-active-class="animate__animated animate__flipOutXs" > <el-row :gutter="20"> <el-col :span="2"> <el-upload class="image-uploader" ref="uploadExcel" :multiple="false" :auto-upload="false" list-type="text" :show-file-list="false" :on-change="uploadChange" action="bakaction" :limit="1" :on-exceed="handleExceed" :http-request="uploadFile" > <el-button size="mini" type="primary">Excel导入</el-button> </el-upload> </el-col> <el-col :span="2"> <el-button size="mini" type="primary" @click="exportExcelVisible = true">数据导出</el-button> </el-col> </el-row> </transition> <export-excel-dialog :visible.sync="exportExcelVisible" @export="handleExportExcel"></export-excel-dialog> </div></template>
1.multiple--是否支持多选文件
2.auto-upload--是否在选取文件后立即进行上传
3.list-type--文件列表的类型
4.show-file-list--是否显示已上传文件列表
5.on-change--文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
6.action--设置'bakaction'为了自定义上传事件
7.limit--最大允许上传个数
8.on-exceed--文件超出个数限制时的钩子
9.http-request--覆盖默认的上传行为，可以自定义上传的实现
methods: { /** * 判断是否为excel文件 */ handleIsExcel(file) { let that = this; const fileName = file.raw.name.slice(-3) //截取文件名后三位 if(fileName === "lsx" || fileName === "xls") { that.isExcel =true that.$emit('update:isExcel',that.isExcel) return true }else { that.isExcel =false that.$emit('update:isExcel',that.isExcel) return false } }, /** * 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 */ uploadChange(file) { let that = this; if(!that.handleIsExcel(file)) { that.$message({ type: 'error', message: '上传错误，请上传excel文件', showClose: true }) that.clearFiles() } that.$emit('exelUpload', file.raw) }, /** * 文件超出个数限制时的钩子 */ handleExceed() { let that = this; that.$message.error("超出文件上传限制"); }, /** * 覆盖默认的上传行为，可以自定义上传的实现 */ uploadFile(item) { let that = this; const file = item.file; const form = new FormData(); // 文件对象 form.append("file", file); // let formTwo = JSON.stringify(form) upload('user/importExcel',form).then((response) => { console.log(response); that.$message.info("文件：" + file.name + "上传成功"); }); }, /** * 清空上传列表 */ clearFiles() { let that = this; that.$refs.uploadExcel.clearFiles(); }, /**数据列表的导入导出 绑定在el-table中的@selection-change * 没选中一项，value就会新一项增一项 */ handleSelectionChange(val){ let that = this; // that.multipleSelection = val; let electSysUserIds = []; if(val) { val.forEach(ele => { electSysUserIds.push(ele.pkid) }); } that.selectUsers = electSysUserIds; }, isSelected() { if(this.selectUsers.length < 1) { this.$message.warning("请先勾选要导出的数据") } }, handleExportExcel(value) { let that = this; let url; if(value === "exportAll") { url = 'user/exportUserExcelByCondition'; window.location.href = url; }else { if(that.isSelected()) { url = 'user/exportUserExcelByIds'; window.location.href = url+"?ids="+that.selectUsers } } } }}
注意：添加阻断事件，保证传给后端的文件是正确的格式
文件接口的请求头设置为new FormData()
逻辑不是很复杂，大佬们应该看得懂，有优化点欢迎留言，小key虚心求教哈~
<template> <div id="UseFileDetail"> <file-upload @exelUpload="fileImport" :isExcel.sync="isExcel"></file-upload> </div></template>
父组件中，涉及到的vue知识点为父子间的数据传递;
具体源码请点击此处
