基于element-admin实现Excel文件的导入导出

首先封装一个导入文件组件，vue-element-admin已经提供了，我们只需要改造即可源代码地址: GitHub源码地址.

基本使用

导入模块

Excel导入功能需要使用xlsx插件 ，首先下载xlsx插件yarn add xlsx

将封装好的组件注册为全局组件 – 使用组件，使用时根据需求修改样式和布局
上图实例样式代码

<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>

在组件中porps中有两个接收函数，beforeUpdate和Onsuccess 。
beforeUpdate：执行后续操作函数，
Onsuccess在使用组件时传入了一个Onsucces 函数时，在组件内部会传出一个对象，就可以拿到传文件的数据（header，results）此时都是中文的文件
在Excel 文件中拿到的数据与后台需要的数据不是对应的需要处理数据格式，才能正确拿到表中的数据，找到后台所需要的数据格式的对应关系，循环拿到的 results 数据 找出里面的key，使用对应关系将拿到的key 转换成英文，将传入文件中的中文的key值赋值给此时的英文key，得到转换完成后的所有数据 再执行后面的操作。。。

导出模块

vue-element-admin 也提供了导出的模块功能 源码地址. 也是依赖于js-xlsx

安装所需的依赖和按需加载

yarn add xlsx file-saver -S
yarn add script-loader -S -D

由于js-xlsx体积还是很大的，建议使用懒加载

import('@/vendor/Export2Excel').then(excel => {
  excel.export_json_to_excel({
    header: tHeader, //表头 必填
    data, //具体数据 必填
    filename: 'excel-list', //非必填
    autoWidth: true, //非必填
    bookType: 'xlsx' //非必填
  })
})

导出参数配置

在导出时数据中的key时英文的，导出的表头是中文的话，需要将中文和英文做对应

例：
  const headers = {
        '手机号': 'mobile',
      }

复杂表头的导出

vue-element-admin 提供的导出方法中有 multiHeader和merges 的参数
multiHeader里面是一个二维数组，里面的一个元素是一行表头，假设你想得到一个如图的结构：

mutiHeader应该这样定义：

const multiHeader = [['姓名', '主要信息', '', '', '', '', '部门']]

multiHeader中的一行表头中的字段的个数需要和真正的列数相等，假设想要跨列，多余的空间需要定义成空串,它主要对应的是标准的表头

const header = ['姓名', '手机号', '入职日期', '聘用形式', '转正日期', '工号', '部门']

如果，我们要实现其合并的效果， 需要设定merges选项:

 const merges = ['A1:A2', 'B1:F1', 'G1:G2']

需要跨行跨列合并是，可以从左上角的单元格坐标到右下角单元格坐标,merges的顺序是没关系的，只要配置这两个属性，就可以导出复杂表头的excel了