1:npm i -S vue-json-excel 安装vue-json-excel
npm i -S vue-json-excel
2:main.js中注册引入
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel);
3:order.vue文件直接使用该组件
<download-excel
class="export-excel-wrapper"
:data="json_data"
:fields="json_fields"
name="已审核订单导出数据.xls"
>
<el-button type="primary" size="small" icon="el-icon-download">导出已审核订单</el-button>
</download-excel>
4:data里面return出数据
//表头
json_fields: {
"订单编号": "orderNumber", //常规字段
"图书名称": "bookName", //支持嵌套属性
"订单数量": "bookNumber",
"提交人": "submitter",
"提交日期": "submitTime",
"审核状态": "auditStatus",
"审核人": "reviewer"
},
//表数据
json_data: [],
//表描述
json_meta: [
[
{
key: "charset",
value: "utf-8"
}
]
5:methods方法里在初始化请求得到数据后填充符合条件的导出数据
this.json_data= arr.map(item=>{
if(item.auditStatus==2){
return item;
}
})