简单易懂的excel表格导出

项目开发时难免会遇到关于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：表头名称

最终结果