• vue中使用element-ui实现excel表格导入


    vue中使用element-ui实现excel表格导入

    vue:

    1 <el-upload class="avatar-uploader" :action="url" :headers="token"
    2             accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
    3             :show-file-list="false" :before-upload="beforeAvatarUpload" :on-progress="uploading"
    4             :on-success="importSuccess" :on-error="importError">
    5     <el-button type="success">导入</el-button>
    6 </el-upload>

    js:

     1 import Cookies from 'js-cookie'
     2 export default {
     3     data() {
     4         return {
     5             url: `${window.SITE_CONFIG['apiURL']}/fenglianmeng/bdpartservant/importExcel`,
     6             token: {
     7                 token: Cookies.get("token")
     8             },
     9         }
    10     },
    11     methods: {
    12         beforeAvatarUpload(file) {
    13         },
    14         uploading() {
    15             this.loading = true;
    16         },
    17         importSuccess(res) {
    18             this.loading = false
    19             if (res.code == 500) {
    20                 return this.$message.error('导入错误,请以正确格式填写文件');
    21             }
    22             if (res.code !== 0) {
    23                 return this.$message.error(res.msg);
    24             }
    25             this.$message({
    26                 message: '导入成功',
    27                 type: "success",
    28                 duration: 500,
    29                 onClose: () => {
    30                     this.getDataList()
    31                 }
    32             });
    33         },
    34         importError(err) {
    35             this.loading = false;
    36             this.$message.error('服务器错误,导入失败')
    37         },
    38     }
    39 }
  • 相关阅读:
    eclipse最有用快捷键整理(转)
    Spring IOC的配置使用(转)
    char varchar varchar2 的区别 (转)
    BigDecimal用法详解(转)
    20160126--springaop
    20160125--Spring
    20150122--接口
    Servlet与JSP的区别
    练习
    151127
  • 原文地址:https://www.cnblogs.com/hexuerui/p/12918765.html
Copyright © 2020-2023  润新知