1、包安装及使用
npm i -s vue-json-excel
在vue main.js 中,或者在nuxt 框架plugins 文件夹下新建
import Vue from 'vue'
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)
2、在页面中使用
<download-excel
:fields="exports.fields"
:name="exports.name"
default-value="暂无"
:fetch="fetchData"
>
下载
</download-excel>
export default {
data() {
return {
exports: {
name: '订单汇总',
fields: {
订单号: {
field: 'id',
callback: value => {
return value + '\n'
}
},
设备IMEI号: {
field: 'imei',
callback: value => {
return value + '\n'
}
},
货道: 'channel',
商品名称: 'name',
交易金额: {
field: 'amount',
callback: value => {
return value / 100
}
},
进货价格: {
field: 'realPrice',
callback: value => {
return value / 100
}
},
运营商: 'companyName',
交易状态: {
field: 'status',
callback: value => {
let str = '待支付'
switch (value) {
case '2':
str = '支付完成'
break
case '3':
str = '交易完成'
break
case '4':
str = '交易失败'
break
case '5':
str = '已退款'
break
}
return str
}
},
备注: 'detail',
收款人: {
field: 'merName',
callback: value => {
return value + '\n'
}
},
消费者: {
field: 'buyerUsername',
callback: value => {
return value + '\n'
}
},
支付方式: {
field: 'targetSys',
callback: value => {
return value
}
},
创建时间: {
field: 'createdAt',
callback: value => {
return this.dateFormat(value)
}
}
}
}
}
}
}
fetchData 函数直接返回json 数组数据 , 值是数字的列换行