vue项目xlsx导入

vue项目xlsx导入并且将数据导入element-ui的表格中

npm i xlsx 安装

<el-uploadaction="":multiple="false":show-file-list="false":on-change="updatedFile":auto-upload="false"><el-button>导入</el-button>
</el-upload>
<div v-if="loading"><el-table:data="xlsxTable"borderstyle="width: 100%"><el-table-column prop="index" label="序号" width="150"><template slot-scope="scope"><div>{{ scope.$index + 1 }}</div></template></el-table-column><el-table-column prop="name" label="名字"></el-table-column><el-table-column prop="sex" label="性别"></el-table-column><el-table-column prop="styChild" label="身份"></el-table-column><el-table-column prop="gradeClass" label="学历"></el-table-column></el-table>
</div>

import xlsl from "xlsx";
methods:{updatedFile(file) {console.log(file);let that = this;let accept = ["xlsx", "xls"];let files = file.raw.name.substr(file.raw.name.lastIndexOf(".") + 1);let index = accept.indexOf(files);if (index === -1) return;const reader = new FileReader();reader.onload = async function (e) {// 解析数据let context = await xlsl.read(e.target.result, { type: "binary" });//XLSX.utils.sheet_to_json()解析excel，给空的单元格赋值为空字符串let excel = await xlsl.utils.sheet_to_json(context.Sheets[context.SheetNames[0]]);that.xlsxTable= excel;that.loading = true;};},
}

vue项目xlsx导入相关推荐

vue项目+xlsx+xlsx-style 实现table导出为excel的功能——技能提升
vue项目+xlsx+xlsx-style 实现table导出为excel的功能最近遇到一个需求,后端提供一组数据,根据这组数据,导出为一个excel表格. 步骤如下: 1. 导出内容的预览如下:包 ...
实战：vue项目中导入swiper插件
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装安装swiper3的最新版本3.4.2: ...
在vue项目中导入element-ui
在vue项目中添加插件导入并注册项目中需要的组件
vue项目中导入视频
vue项目中引入视频插件一.安装插件 vue-video-player npm install vue-video-player -s 二.在main.js里倒入并使用 import VideoPl ...
vue 使用 XLSX 导入表格
引言后台管理系统中有时会出现需要导入表格的情况,因此查阅资料封装此功能下载插件 npm i xlsx 封装组件第一种  <tem ...
vue项目的导入idea以及环境搭建中提示错误的处理方法
文章目录一.安装nodejs 1.安装nodejs,默认下一步就OK 2.测试nodejs是否安装成功二.环境变量的配置第一步:配置默认安装目录和缓存日志目录. 第二步:环境变量配置. 三.安装 ...
vue项目中导入icon字体文件出现This relative module was not found:* ./iconfont.eot?t=1523541245904
报错提示: This relative module was not found: *./iconfont.eot?t=1523541245904 in ./node_modules/css-load ...
vue导入swiper_vue项目中导入swiper插件的方法
这篇文章主要为大家详细介绍了vue项目中导入swiper插件的方法,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 版本选择 swiper是个常用 ...
【Vue 项目】Unknown custom element: XXX - did you register the component correctly? 【问题解决】
相信各位在学习和使用 Vue 进行开发的过程中,或多或少可能见到过或遇到过这样的报错: 问题出现的原因很简单:就是某个标签没有被成功导入. 问题的解决方案也很简单,网上一搜就会有很多解决方法,比如: ...

vue项目xlsx导入

vue项目xlsx导入相关推荐

最新文章

热门文章