vue读取Excel并分组处理数据显示

何忧非喜{傲娇的程序媛}

于 2021-11-12 20:44:54 发布

阅读量1.3k

点赞数

分类专栏： vue+element 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/u013252962/article/details/121295455

版权

本文介绍如何在Vue.js项目中使用xlsx库读取Excel文件，并针对数据的特殊性进行处理和分组显示。由于数据格式的差异，需要在Excel中额外增加一行作为key，以便于在前端进行数据操作。结合ElementUI，实现数据的展示。

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

安装xlsx

Excel数据格式（因处理的特殊性，不像PHPExcel后端读取Excel那样，以A_Z可以获取指定列数据，故此Excel默认增加一行数据，作为key）

第一行相当重要***
在这里插入图片描述

vue数据处理并展示（vue+elementUi）

上传按钮
<el-upload class="upload-demo" ref="upload" action="" :auto-upload="false" :on-change="handleChange"
					:on-error="handelError" :show-file-list="false"
					accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
					<el-button type="success">选择文件批量导入</el-button>
				</el-upload>



<el-table :data="list" style="width: 100%" border :max-height="maxHeight" v-loading="loading"
				element-loading-text="数据导入中">
				<el-table-column type="index" label="序号" width="80">
				</el-table-column>
				<el-table-column prop="o.date" label="配送日期" width="100">
				</el-table-column>
				<el-table