项目开发时难免会遇到关于excel表格导出功能,这个记录一下表格导出的简单方法 -- 使用vue-json-excel实现
一、安装vue-json-excel
npm install vue-json-excel -S
二、在main.js中引入
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)
三、代码实现
<template>
<download-excel
class="export-excel-wrapper"
:data="DetailsForm"
:fields="json_fields"
:header="title"
name="文件名.xls"
>
<el-button type="warning" size="small" @click="exportData">导出excel表格</el-button>
</download-excel>
</template>
<script>
import dayjs from 'dayjs'
export default {
name: 'excelIndex',
data() {
return {
title: '订单详情',
DetailsForm: [],
json_fields: {
订单编号: 'code',
下单人: 'ordername',
所属单位: 'company',
联系电话: 'phone',
预定时间: 'yudingTime',
订单总价格: 'price',
汇总状态: 'huizongStatus',
},
}
},
methods: {
exportData() {
const newArr = [...this.$store.state.orderList.choiceExcel]
newArr.forEach((el) => {
console.log('111')
el.huizongStatus = el.huizongStatus == 1 ? '未汇总' : '已汇总'
el.yudingTime = dayjs(el.yudingTime).format('YYYY-MM-DD HH:mm:ss')
})
this.DetailsForm = newArr
this.$store.dispatch('orderList/getOrderList')
},
},
}
</script>
<style lang="less" scoped></style>
四、属性解读
data:导出的数据 -- array
fields:导出JSON对象中的字段(导出表格的表头与数据中字段相匹配)
header:表格标题
name:文件名.xls
header:表头名称
最终结果