应用十一:Vue之基于ElementUI封装execl导入组件

  针对上一篇《应用十:Vue之Vue与TypeScript集成开发》的介绍,这里给大家分享一个在近期项目中封装的导入组件,参考组件源码来更好的熟悉.vue文件中脚本的语法。

组件源码:

<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 v-loading="loading" element-loading-text="正在导入">
        <div style="color: #2D2D2D;margin-bottom: 20px;">导入文件</div>
        <el-upload class="upload-demo"
            ref="upload"
            :action="url"
            name="file"
            :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>
        <div v-if="templateUrl"><span class="download-template" @click="templateDownload">{{name + ‘模板下载‘}}</span></div>
        <el-button class="import-btn" 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 templateUrl!: string  // 模板下接口地址
  @Prop({ default: ‘‘ }) private name!: string

  private loading: boolean = false
  private importDialogVisible: boolean = false
  private importHeaders:any = {‘token‘: sessionStorage.getItem(‘token‘)}
  private fileList: Array<any> = []

  //  下载导入模板
  public templateDownload() {
    // TODO
  }

  @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.loading = true
    this.upload.submit()
  }

  @Emit(‘uploadSuccess‘)
  public uploadSuccess(res: any) {
    this.loading = false
    this.importDialogVisible = false;
    return res
  }
}
</script>

<style lang="scss">
  #myImport {
    display: inline-block;
    margin-left: 10px;
    .download-template {
      color: #5C5C5C;
      font-size: 12px;
      border-bottom: 1px solid #5C5C5C;
      cursor: pointer;
    }
    .import-btn {
      position: relative;
      right: -420px;
    }
  }
</style>

如果对脚本语法还不是特别理解,可以回过头再去查看vue-property-decorator官方文档。

组件的使用:

<div class="btn-form">
     <el-button type="primary" @click="queryTableData">查询</el-button>
     <el-button type="primary" plain @click="clearFormData">重置</el-button>
     <el-button type="primary" plain @click="exportTableData">导出</el-button>
     <!--导入组件-->
     <my-import :url="url" :templateUrl="templateUrl" :name="‘报废信息‘" @uploadSuccess="uploadSuccess"></my-import>
 </div>

效果:

原文地址:https://www.cnblogs.com/fengyuexuan/p/12146133.html

时间: 2024-11-05 21:38:19

应用十一:Vue之基于ElementUI封装execl导入组件的相关文章

基于ElementUI封装可复用的表格组件

<template> <section class="ces-table-page"> <!-- 表格操作按钮 --> <section class="ces-handle" v-if='isHandle'> <el-button v-for='item in tableHandles' :key='item.label' :size="size || item.size" :type=&qu

vue+elementUI封装的时间插件(有起始时间不能大于结束时间的验证)

vue+elementUI封装的时间插件(有起始时间不能大于结束时间的验证): html: <el-form-item label="活动时间" required> <el-col :xs="24" :sm="11" :md="7" :lg="5" class="startTime"> <el-form-item prop="start_time&

基于element-ui的多选下拉框和tag标签的二次封装

前言: 今年这大半年我主要负责公司的后台教务管理的开发,这个管理系统目前主要是给公司的内部人员去配置公司的核心项目(例如:熊猫小课)的所有数据,例如课程的配置.课程期数的配置.课程版本的配置.活动的配置.课程安排表.管理员的权限配置.物流的管理.退款管理.学员咨询管理等功能.因为一开始这个教务系统的原型设计就是基于element-ui 1.4.13的版本设计的,前端一开始为了和设计稿给的原型保持一致,项目中也是基于element-ui 1.4.13在开发,现在这个版本官方已经停止维护了,我们曾经

vue + elementui 中的弹窗组件封装成公共组件

如果一个弹窗比较简单,可以直接放在页面中,通过visible属性的true,false控制显示隐藏就可以了,我们今天要说的是将个比较复杂的弹窗组件封装成全局组件,然后可以在项目中的任何一个页面引用~~下面走起 1.首先要注册个全局组件,用下面的全局API  Vue.component('my-component', { /* ... */ }) 在js文件中首先引入这个弹窗组件,组件名称是iesPersonRadioDialog,项目中会引入一个js文件,这个js文件中在分别引入其他的js,模块

基于elementUI创建的vue项目

这周对公司的内容使用vue进行重构,所以记录一下开始项目的过程 下载elementUI: 项目文件夹中在命令行中输入:npm install elementui -s 下载完成后在 main.js 中加入以下内容: import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); 需要注意的是,样式文件需要单独引入 使用elementui的布局的组件组成页面

vue之better-scroll的封装,包含下拉刷新,上拉加载功能及UI(核心为借鉴,我仅仅是给轮子套上了外胎...)

先发原文作者.地址等信息.我把内容全部搬过来了,也可以去看原文.内容绝对是满满的干货,给原作者点赞!(我添加的内容在转载过来的后面,内容不多) 作者: ustbhuangyi 链接:http://www.imooc.com/article/18232 来源:慕课网 在我们日常的移动端项目开发中,处理滚动列表是再常见不过的需求了,以滴滴为例,可以是这样竖向滚动的列表,如图所示: 也可以是横向滚动的导航栏,如图所示: 可以打开"微信 -> 钱包->滴滴出行"体验效果. 我们在实

在vue中使用Element-UI

Element-UI是一套基于Vue2.0的UI组件库,http://element.eleme.io/#/zh-CN/component/carousel 首先npm install element-ui --save 然后在main.js中引入: import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css' import App from './

聊聊 Vue 中 axios 的封装

聊聊 Vue 中 axios 的封装 axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 作为一个优秀的 HTTP 库,axios 打败了曾经由 Vue 官方团队维护的 vue-resource,获得了 Vue 作者尤小右的大力推荐,成为了 Vue 项目中 HTTP 库的最佳选择. 虽然,axios 是个优秀的 HTTP 库,但是,直接在项目中使用并不是那

Vue Admin - 基于 Vue &amp; Bulma 后台管理面板

Vue Admin 是一个基于 Vue 2.0 & Bulma 0.3 的后台管理面板(管理系统),相当于是 Vue 版本的 Bootstrap 管理系统,提供了一组通用的后台界面 UI 和组件,其中还有丰富的图表组件,开箱即用.赶紧来体验一下吧. 在线演示      免费下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[