excel数据导入组件封装
封装一个导入excel数据的文件
首先封装一个相似的组件，首先须要留神的是，相似性能，vue-element-admin曾经提供了，咱们只须要革新即可 代码地址
相似功能性的组件，咱们要会应用和封装即可
excel导入性能须要应用npm包xlsx，所以须要装置xlsx插件
$ npm i xlsx将vue-element-admin提供的导入性能新建一个组件，地位： src/components/UploadExcel注册全局的导入excel组件
import UploadExcel from './UploadExcel'export default { install(Vue) { Vue.component('UploadExcel', UploadExcel) // 注册导入excel组件 }}批改款式和布局
<template> <div class="upload-excel"> <div class="btn-upload"> <el-button :loading="loading" size="mini" type="primary" @click="handleUpload"> 点击上传 </el-button> </div> <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick"> <div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover"> <i class="el-icon-upload" /> <span>将文件拖到此处</span> </div> </div></template><style scoped lang="scss">.upload-excel { display: flex; justify-content: center; margin-top: 100px; .excel-upload-input{ display: none; z-index: -9999; } .btn-upload , .drop{ border: 1px dashed #bbb; width: 350px; height: 160px; text-align: center; line-height: 160px; } .drop{ line-height: 80px; color: #bbb; i { font-size: 60px; display: block; } }}</style>excel数据导入
建设公共导入的页面路由
新建一个公共的导入页面，挂载路由 src/router/index.js
{ path: '/import', component: Layout, hidden: true, // 暗藏在左侧菜单中 children: [{ path: '', // 二级路由path什么都不写 示意二级默认路由 component: () => import('@/views/import') }] },创立import路由组件 src/views/import/index.vue
<template> <!-- 公共导入组件 --> <upload-excel :on-success="success" /></template>剖析excel导入代码，封装接口
封装导入的api接口
/** * * 封装一个导入的接口 * * ***/export function importEmployee(data) { return request({ url: '/user/data', method: 'post', data })}实现excel导入
获取导入的excel数据, 导入excel接口
async success({ header, results }) { const userRelations = { '手机号': 'mobile', '姓名': 'username', '工号': 'workNumber' } const arr = [] results.forEach(item => { const userInfo = {} Object.keys(item).forEach(key => { userInfo[userRelations[key]] = item[key] }) arr.push(userInfo) }) await importEmployee(arr) // 调用导入接口 this.$router.back() }为了让这个页面能够服务更多的导入性能，咱们能够在页面中用参数来判断
data() { return { type: this.$route.query.type } },当excel中有日期格局的时候，理论转化的值为一个数字，咱们须要一个办法进行转化
formatDate(numb, format) { const time = new Date((numb - 1) * 24 * 3600000 + 1) time.setYear(time.getFullYear() - 70) const year = time.getFullYear() + '' const month = time.getMonth() + 1 + '' const date = time.getDate() - 1 + '' if (format && format.length === 1) { return year + format + month + format + date } return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date) }小结
这样咱们就能够来做咱们的我的项目了, js高程第四版链接: https://pan.baidu.com/s/18P8k... 能够加公众号获取提取码.
若有不懂的中央，请加q群147936127交换或者vx: ltby52119，谢谢~