业务导出excel功能实现

思路

1. 从后台重新获取数据（这样才能确保是最新的）
2. 对数据的格式进行转换（后端给的数据字段名都是英文的），以用来做导出
   
   核心在于把后端接口返回的数据转成Export2Excel这个插件需要的格式

准备表头header数据

因为接口中返回的数据中的key是英文，而我们期望导出的表头是中文，所以提前准备中文和英文的映射关系

const map = {
  'id': '编号',
  'password': '密码',
  'mobile': '手机号',
  'username': '姓名',
  'timeOfEntry': '入职日期',
  'formOfEmployment': '聘用形式',
  'correctionTime': '转正日期',
  'workNumber': '工号',
  'departmentName': '部门',
  'staffPhoto': '头像地址'
}

目标表格data数据

具体的表格数据我们需要通过接口从后端获取回来，难点在于如何把后端返回的数据处理成Export2Excel插件需求的二维数组格式。
下面是一个示例：

const dataArr = 
[
 ["13600000001", "吕勇锐", "1992-08-04", "正式", "2020-01-01", "0001", "总裁办"]
 ["13600000002", "袁永安", "1993-08-04", "正式", "2020-01-01", "0002", "总裁办"]
]

补充一个用来处理数据的函数

formatData(list) {
      const map = {
        'id': '编号',
        'password': '密码',
        'mobile': '手机号',
        'username': '姓名',
        'timeOfEntry': '入职日期',
        'formOfEmployment': '聘用形式',
        'correctionTime': '转正日期',
        'workNumber': '工号',
        'departmentName': '部门',
        'staffPhoto': '头像地址'
      }
      console.log(list)
      let header = []
      // header = ['id', 'mobile', 'username', .....]
      // data = [
      //     ['65c2', '1380000002', '管理员', ....],
      //     ['65c3', '1380000003', '孙财', ....],
      // ]
      let data = []
      // 开始代码
      // 找到一个元素
      const one = list[0]
      if (!one) {
        return { header, data }
      }
      header = Object.keys(one).map(key => {
        return map[key]
      })

      // data把list中每一个对象转成 对应的value数组
      data = list.map(obj => {
        // 把  Obj['formOfEmployment']: 1 , 2   ---> '正式'， '非正式'
        const key = obj['formOfEmployment'] // 1, 2
        obj['formOfEmployment'] = hireTypEnmu[key] // hireTypEnmu:{1:'正式', '2':'非正式' }

        return Object.values(obj)
      })

      return { header, data }
    },

剩下的就是按照vue-element-admin上提供的导出excel步骤一步一步来了
地址：如何实现导出excel