基于ElementUI封装Excel数据导入组件
由于前端项目使用的是Vue-cli3.0 + TypeScript的架构,所以该组件也是基于ts语法封装的,组件的完整代码如下:
<template> <div id="myImport"> <el-button type="primary" plain @click="importDialogVisible = true">导入</el-button> <!-- 导入弹窗 --> <el-dialog :title="name + '导入'" :visible.sync="importDialogVisible" width="560px" :close-on-click-modal="false" @close="fileList = []"> <div> <div style="color: #2D2D2D;margin-bottom: 20px;">导入文件</div> <el-upload class="upload-demo" ref="upload" :action="url" name="excelFile" :headers="importHeaders" :on-change="changeUpload" :on-success="uploadSuccess" :file-list="fileList" :limit="1" :multiple="false" :auto-upload="false" > <el-button slot="trigger" type="primary">选取文件</el-button> <div slot="tip" class="el-upload__tip"></div> </el-upload> <br><br> <div><span style="color: #5C5C5C;font-size: 12px;border-bottom: 1px solid #5C5C5C;">{{name + '模板下载'}}</span></div> <el-button style="position: relative;right: -420px;" type="primary" @click="submitUpload">导入</el-button> </div> </el-dialog> </div> </template> <script lang="ts"> import { Component, Prop, Emit, Vue, Ref } from 'vue-property-decorator' @Component export default class MyImport extends Vue { @Prop({ default: '' }) private url!: string @Prop({ default: '' }) private name!: string private importDialogVisible: boolean = false private importHeaders: Object = {'token': sessionStorage.getItem('token')} private fileList: Array<any> = [] @Ref() readonly upload!: any public changeUpload(file: File, fileList: Array<any>) { let index: number = file.name.lastIndexOf('.') let suffix: string = file.name.substring(index + 1).toUpperCase() if (suffix !== 'XLS' && suffix !== 'XLSX') { this.$message.error('只支持导入execl文件') this.upload.clearFiles() return false } this.fileList = fileList } public submitUpload() { if(this.fileList.length == 0) { this.$message.error('请选择要导入的文件') return false } this.upload.submit() } @Emit('uploadSuccess') public uploadSuccess(res: any) { this.importDialogVisible = false; return res } } </script> <style lang="scss"> #myImport { display: inline-block; margin-left: 10px; .el-dialog { text-align: initial; .el-dialog__header { background-color: #824C96; padding: 6px; .el-dialog__title { color: #fff; font-size: 14px; margin-left: 10px; } .el-dialog__close { color: #fff; position: relative; top: -10px; right: -10px; } } } } </style>
Vue与ts集成的语法风格请查看vue-property-decorator官方文档。
具体应用呢就是在对应的.vue文件引入该组件,假设组件名称为my-import,然后在页面对应位置加入以下代码:
<div class="btn-item"> <el-button type="primary">查询</el-button> <el-button type="primary" plain>重置</el-button> <el-button type="primary" plain>导出</el-button> <!--导入组件--> <my-import :url="url" :name="name" @uploadSuccess="uploadSuccess"></my-import> </div>
其中url为后台导入接口路径,name为导入信息名称,uploadSuccess为导入成功的回调。
代码运行后的展示效果如下:
基于ElementUI封装Excel数据导入组件的更多相关文章
- 基于NPOI的Excel数据导入
从Excel导入数据最令人头疼的是数据格式的兼容性,特别是日期类型的兼容性.为了能够无脑导入日期,折腾了一天的NPOI.在经过测试确实可以导入任意格式的合法日期后,写下这篇小文,与大家共享.完整代码请 ...
- 基于element-ui封装一个Table模板组件
大家在做后台管理系统的时候,写的最多的可能就是表格页面了,一般分三部分:搜索功能区.表格内容区和分页器区.一般这些功能都是使用第三方组件库实现,比如说element-ui,或者vuetify.这两个组 ...
- java基于xml配置的通用excel单表数据导入组件(五、Action处理类)
package xxxxxx.manage.importexcel; import java.io.File; import java.util.HashMap; import java.util.M ...
- 效率最高的Excel数据导入---(c#调用SSIS Package将数据库数据导入到Excel文件中【附源代码下载】) 转
效率最高的Excel数据导入---(c#调用SSIS Package将数据库数据导入到Excel文件中[附源代码下载]) 本文目录: (一)背景 (二)数据库数据导入到Excel的方法比较 ...
- kettle将Excel数据导入oracle
导读 Excel数据导入Oracle数据库的方法: 1.使用PL SQL 工具附带的功能,效率比较低 可参考这篇文章的介绍:http://www.2cto.com/database/201212/17 ...
- 批量Excel数据导入Oracle数据库
由于一直基于Oracle数据库上做开发,因此常常会需要把大量的Excel数据导入到Oracle数据库中,其实如果从事SqlServer数据库的开发,那么思路也是一样的,本文主要介绍如何导入Excel数 ...
- 代码执行批量Excel数据导入Oracle数据库
由于基于Oracle数据库上做开发,因此常常会需要把大量的Excel数据导入到Oracle数据库中,其实如果从事SqlServer数据库的开发,那么思路也是一样的,本文主要介绍如何导入Excel数据进 ...
- Java代码实现excel数据导入到Oracle
1.首先需要两个jar包jxl.jar,ojdbc.jar(注意版本,版本不合适会报版本错误)2.代码: Java代码 import java.io.File; import java.io.Fi ...
- 将Excel数据导入mysql数据库的几种方法
将Excel数据导入mysql数据库的几种方法 “我的面试感悟”有奖征文大赛结果揭晓! 前几天需要将Excel表格中的数据导入到mysql数据库中,在网上查了半天,研究了半天,总结出以下几种方法,下面 ...
随机推荐
- yum源配置及详解
红帽系列中,进行软件安装可以有三种方法,编译安装,rpm包安装,和yum源安装.其中yum方法安装最简单,因为它可以自动解决软件包之间的依赖关系... 一.常用yum源 yum源可以来源于多种文件 ...
- java时间还在用date和calender?换LocalDateTime吧!
java在时间计算上一直为人所诟病,在社区强烈反应下,java8推出了线程安全.简易.高可靠的时间包.并且数据库中也支持LocalDateTime类型,所以在数据存储时候使时间变得简单. LocalD ...
- Framework7 无限滚动
html结构 <div class="page"> <div class="page-content infinite-scroll"> ...
- python 子类继承父类属性及实例化方法
- [idea]idea配置Jrebel 标签: ideatomcatjrebel 2017-03-14 09:23 547人阅读 评论(21
上篇博客讲了如何为idea设置tomcat,这篇博客要给大家推荐Jrebel,其实eclipse上也可以配置Jrebel,但是在使用eclipse的时候并没有发现这些东西,还是习惯使然,对一个比较熟悉 ...
- 某input元素值每隔三位添加逗号跟去掉逗号
//每隔三位数字加一个逗号function moneyformat(s) { var reg = /.*\..*/; if (reg.test(s) == true) { n ...
- 集合--List&&ArrayList-LinkedList
1.8新特性 List接口中的replaceAll()方法,替换指定的元素,函数式接口编程 List 元素是有序的并且可以重复 四种add();方法 ArrayList(用于查询操作),底层是数组 ...
- spring boot 2.X上传文件限制大小
Spring Boot 1.3.x multipart.maxFileSize multipart.maxRequestSize Spring Boot 1.4.x and 1.5.x spring. ...
- H5+ 分享到微信、朋友圈代码示例
h5+分享到微信.朋友圈代码示例 在使用分享功能的时候会莫名的分享失败,debug时发现是图片过大的问题. 图片过大时ios平台上返回错误码-8,安卓上返回错误码-3(我测试是这样) 因此如果第一次分 ...
- POJ-2502_Subway
Subway Time Limit: 1000MS Memory Limit: 65536K Description You have just moved from a quiet Waterloo ...