vue与element实现excel文件导入,让表格数据处理更高效

前言

数据处理已经成为了各行各业必不可少的工作。然而,手动输入数据费时费力,容易出错,因此,我们需要一种高效、准确、方便的方式来导入数据。而 excel 是一个广泛使用的数据处理工具,因此,将 excel 文件导入到表格中已经成为了一个常见的需求。本文将介绍如何使用 vue 基于 element 实现 excel 文件导入到表格中的功能。


先看实现效果

在这里插入图片描述


实现思路:

其实主要是通过 elementupload 组件的 @on-change 事件,通过请求后台的导入接口,传给后台所需要的参数即可实现。话不多说,下面直接上实例代码。


html

属性描述
action必选参数,上传的地址
auto-upload是否在选取文件后立即进行上传,通过true、false控制
multiple是否支持多选文件,通过true、false控制
show-file-list是否显示已上传文件列表,通过true、false控制
file-list上传的文件列表
on-change文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用
<div class="ChannelStyle">
     <el-upload action="" :auto-upload="false" :multiple="false" :show-file-list="false" :on-change="uploadByJsqd" :file-list="fileList" >
       <el-button type="primary" size="mini">导入</el-button>
     </el-upload>
</div>

data

data() {
    return {
      fileList: [],//上传的文件列表
    }
  },

js

methods: {
      //文件校验方法
      beforeAvatarUpload(file) {
        // 通过split方法和fileArr方法获取到文件的后缀名
        let fileArr = file.name.split('.')
        let suffix = fileArr[fileArr.length - 1]
        //只能导入.xls和.xlsx文件
        if (!/(xls|xlsx)/i.test(suffix)) {
          this.$message('文件格式不正确')
          return false
        }
        //不能导入大小超过2Mb的文件
        if (file.size > 2 * 1024 * 1024) {
          this.$message('文件过大,请上传小于2MB的文件〜')
          return false
        }
        return true
      },
      //文件发生改变就会触发的事件
      uploadByJsqd(file) {
        //判断是否符合beforeAvatarUpload方法中的条件
        if (this.beforeAvatarUpload(file)) {
          this.fileList.name = file.name
          this.fileList.url = ''
          var formdata = new FormData()
          formdata.append('file', file.raw)
          //importDevice:请求接口 formdata:传递参数
          importDevice(formdata).then((res) => {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.getList()//调用表格方法,刷新页面
          })
        }
      },
    },

至此导入的功能就实现啦!

  • 15
    点赞
  • 72
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 13
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

水星记_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值