第一步:跟上篇文章一样操作 先找到目标所在地方
点击导出Excel 会出现下图
第二步:就是找源码了, 先根据路径在源码中找到相对应的文件
文件中的代码如下 把它复制到你的文件中
在文件中发现有导入的包 然后根据路径提示找到它 图中红色箭头指的就是导入的包
找到的包如下
把这个包放到src里面就行 然后需要下个包 下载方式为 npm i file-saver 或 yarn add file-saver
第三步 :修改代码 修改后的代码 如下
handleDownload() {
this.downloadLoading = true
import('@/vendor/Export2Excel').then(async(excel) => {
// 设置表头
const res = await getEmployeeList({ page: 1, size: this.total })
/* list 导出的数据列表 */
const list = res.data.rows
// eslint-disable-next-line no-unused-vars
const data = this.formatJson(list)
const tHeader = this.header
excel.export_json_to_excel({
header: tHeader,
data: data,
filename: 'vue', // 设置文件名可以随意设置
autoWidth: true
// bookType: "txt", //设置文件格式
})
// this.downloadLoading = false
})
},
formatJson(list) {
const map = {
id: '编号',
password: '密码',
mobile: '手机号',
username: '姓名',
timeOfEntry: '入职日期',
formOfEmployment: '聘用形式',
correctionTime: '转正日期',
workNumber: '工号',
departmentName: '部门',
staffPhoto: '头像地址'
}
// 目的:将以为list数组转换成二维数组
return list.map((item) => {
/* 4-定义一个收集数据的对象 */
var obj = {}
/* 4-定义一个收集数据的对象 */
var enKey = Object.keys(map)
/* 3-获取每一个英文键所对应的值 */
enKey.forEach((key) => {
/* 5-获取中文键,并定义对象中属性 */
var zhKey = map[key]//编号
obj[zhKey] = item[key]// {编号:值}==>{编号:65c2,密码:1111112233}
})
/* 6-获取所有obj中的值 */
var valueArr = Object.values(obj) // ["2018-11-02","管理员","9002"]
// ["2018-11-02","管理员","9002"]
this.header = Object.keys(obj)
return valueArr
})
}