使用el-upload上传excel文件并读取显示到el-table上

最新推荐文章于 2024-04-16 15:12:00 发布

软件测试小菜鸟正在更新中

最新推荐文章于 2024-04-16 15:12:00 发布

阅读量2.8k

点赞数 4

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_43258184/article/details/121850027

版权

本文介绍了如何在Vue.js项目中利用el-upload组件上传Excel文件，并通过JavaScript库XLSX读取数据，将内容展示在el-table上。首先，在页面上创建上传按钮并定义onChange事件。接着，编写readExcel方法来处理文件，这个方法需要安装XLSX库，并在main.js中引入。最后，解析Excel数据并将其填充到el-table组件中。

摘要由CSDN通过智能技术生成

页面定义上传按钮：

<el-upload action="/上传文件的接口" :on-change="onChange" :auto-upload="false" :show-file-list="false" accept=".xls, .xlsx">
              <el-button v-waves size="mini" type="warning" icon="el-icon-folder-add">
                上传
              </el-button>
 </el-upload>

声明onChange事件：

onChange(file, fileList) {
   
      this.fileData

最低0.47元/天解锁文章

软件测试小菜鸟正在更新中

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
使用el-upload上传excel文件并读取显示到el-table上

页面定义上传按钮：<el-upload action="/上传文件的接口" :on-change="onChange" :auto-upload="false" :show-file-list="false" accept=".xls, .xlsx"> <el-button v-waves size="mini" type="warning" icon="el-icon-folder-add"> 上传
复制链接

扫一扫