如何实现表格的批量导入

第一步：先在 vue-element-admin 官网中找到GitHub标志然后点击进去

第二步：点击在线演示 进入 线上演示地址 找到下面这个图片里的 点击Excel 里面的上传Excel 会出现第二张图片中的样式

第三步：打开源代码找到所对应的源代码 然后放在公共样式的components里面 文件如下图 直接把整个文件拿走 复制过来 需要下包 npm i xlsx@0.14.1 或 yarn add xlsx@0.14.1

避免找错 里面的部分代码如下

第四步： 配置路由

第五步 在需要的地方引入公共组件 如下

第六步封装axios请求 封装的axios接口 由你们接口文档决定

第七步 配置代码如下 下面的mapInfo 里面的参数 是根据 你们自己的请求中的参数变更

// 把excel文件中的日期格式的内容转回成标准时间
// https://blog.csdn.net/qq_15054679/article/details/107712966
export function formatExcelDate(numb, format = '/') {
  const time = new Date((numb - 25567) * 24 * 3600000 - 5 * 60 * 1000 - 43 * 1000 - 24 * 3600000 - 8 * 3600000)
  time.setYear(time.getFullYear())
  const year = time.getFullYear() + ''
  const month = time.getMonth() + 1 + ''
  const date = time.getDate() + ''
  if (format && format.length === 1) {
    return year + format + month + format + date
  }
  return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date)
}

import { importEmployee } from '@/api/employess'
import { formatExcelDate } from '@/utils/index'

 methods: {
    async handleSuccess({ results, header }) {
      const mapInfo = {
        入职日期: 'timeOfEntry',
        手机号: 'mobile',
        姓名: 'username',
        转正日期: 'correctionTime',
        工号: 'workNumber',
        部门: 'departmentName',
        聘用形式: 'formOfEmployment'
      }
      var newResultes = results.map((item) => {
        // 3. 定义一个空对象，重新定义数组中的每一项
        var obj = {}
        // 1. 获取中文键数组
        var chKeys = Object.keys(mapInfo)
        // ['入职日期'，'手机号','姓名'......]
        chKeys.forEach((key) => {
          // 2.  获取英文键
          var enkey = mapInfo[key]
          // 4. 重新定义数组中的每一项的值
          if (enkey === 'timeOfEntry' || enkey === 'correctionTime') {
            obj[enkey] = new Date(formatExcelDate(item[key]))
          } else {
            obj[enkey] = item[key]
          }
        })
        return obj
      })
      // console.log(newResultes, 9988)
      // eslint-disable-next-line no-unused-vars
      const res = await importEmployee(newResultes)
    }

  }