第一步：安装插件
npm -i xlsx
第二步：main.js 挂载插件
import xlsx from
"xlsx"
Vue.prototype.xlsx
= xlsx
第三步：编写导出组件，在使用xlsx，要使用this。
<template
>
<!-- 批量导出按钮 --
>
<div class
="searchBox">
<el-button type
="success" @click
="exportExcel">导出EXCEL
</el-button
>
</div
>
</template
>
<script
>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from
'《组件路径》';
export default
{
//import引入的组件需要注入到对象中才能使用
components:
{},
props:
{
//父组件选中的数据
selectionData:
{
type:Array,
default:null
},
},
data
() {
//这里存放数据
return {
loading: false, //表格加载动画是否开启
};
},
//监听属性 类似于data概念
computed:
{},
//监控data中的数据变化
watch:
{},
//方法集合
methods:
{
// 批量导出EXCEL
exportExcel
() {
let selectionData
= this.selectionData
;
if (selectionData.length
=== 0
) {
this.
$message({
message:
"请选择你要导出的客户数据",
type:
"warning",
});
return;
}
// 加上一个loading 正在处理中
....
let loading
= this.
$loading({
text:
"正在处理中...",
background:
"rgba(0, 0, 0, 0.7)",
});
// 把选中的数据导出成一个excel
// formatJSONWeet
(selectionData
) 数据转换 name -
> 姓名
console.log
("前",selectionData
);
selectionData
= this.formatJSONWeet
(selectionData
);
console.log
("后",selectionData
);
let sheet
= this.xlsx.utils.json_to_sheet
(selectionData
);
// https://www.jianshu.com/p/ea115a8e9107
var book
= this.xlsx.utils.book_new
(); // 创建一个excel
this.xlsx.utils.book_append_sheet
(book, sheet,
"客户列表"); // 指定表名
this.xlsx.writeFile
(book,
`customlist${new Date().getTime()}.xlsx`); // 指定excel文件名
loading.close
();
this.
$emit('clearSelectionData',this.selectionData
); //向父组件传递方法，关闭选择的选项
},
formatJSONWeet
(result
) {
//根据自己的需要导出自己对应的字段
let propertyMap
= {
编号:
{
key:
"userId",
type:
"number",
},
姓名:
{
key:
"username",
type:
"string",
},
状态:
{
key:
"status",
type:
"string",
rule:
(val
) => {
return val
== 0 ?
"禁用" : "启用";
},
},
邮箱:
{
key:
"email",
type:
"string",
},
电话:
{
key:
"mobile",
type:
"string",
},
};
return result.map
(item
=> {
let obj
= {};
Object.keys
(propertyMap
).forEach
(key
=> {
let {
type,
key: keyMap,
rule
} = propertyMap
[key
];
let value
= item
[keyMap
];
typeof rule
=== "function" ? value
= rule
(value
) : null
;
switch
(type
) {
case 'string':
value
= String
(value
);
break;
case 'number':
value
= Number
(value
);
break;
}
obj
[key
] = value
;
});
return obj
;
});
},
},
//生命周期 - 创建完成（可以访问当前this实例）
created
() {},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted
() {},
beforeCreate
() {}, //生命周期 - 创建之前
beforeMount
() {}, //生命周期 - 挂载之前
beforeUpdate
() {}, //生命周期 - 更新之前
updated
() {}, //生命周期 - 更新之后
beforeDestroy
() {}, //生命周期 - 销毁之前
destroyed
() {}, //生命周期 - 销毁完成
activated
() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script
>
<style
>
</style
>
在页面中使用
<template
>
<!-- 导出组件 --
>
<exportComponents :selectionData
="dataListSelections" @clearSelectionData
="clearDataList"></exportComponents
>
</template
>
<script
>
import exportComponents from
"@/components/export/export";
export default
{
components:
{
exportComponents
},
methods:
{
//清空选项数据
clearDataList
(){
this.
$refs.multipleTable.clearSelection
();
},
}
}
</script
>
