vuejs导出功能封装table

1、建一个export.js

复制代码import dateTime from "@/utils/dateTime.js"; //封装当前时间组件
import {
    Message
} from 'element-ui';
export default {
    //导出
    excel(tableCol, exportData, title, monthName) {
        if (exportData.length == 0) {
            Message.warning({ message: '当前暂无数据可导出！' });
            return
        }
        require.ensure([], () => {
            const { export_json_to_excel } = require("@/vendor/Export2Excel");
            let tableLabel = [];
            let tableProp = [];
            tableCol.forEach(item => {
                tableLabel.push(item.label);
                tableProp.push(item.prop);
            });
            const tHeader = tableLabel;
            const filterVal = tableProp;
            const list = exportData; //把data里的exportData存到list
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(
                tHeader,
                data,
                title + dateTime.getBeforeDate(0)
            );
        });
    },
    formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]));
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

2、vuejs页面中导出按钮

复制代码data() {
    return {
	  exportExcelData: [],
      tableCol: [
        {
          width: "100",
          prop: "invoiceNo",
          label: "发票号"
        },
        {
          width: "140",
          prop: "invoiceDate",
          label: "开票时间"
        },
        {
          width: "70",
          prop: "invoicePrice",
          label: "开票金额"
        },
        {
          width: "90",
          prop: "returnMonenyStatus",
          label: "回款状态"
        },
        {
          width: "140",
          prop: "returnMonenyDate",
          label: "回款时间"
        },
        {
          width: "70",
          prop: "returnMonenyPrice",
          label: "回款金额"
        },
        {
          width: "140",
          prop: "createTime",
          label: "创建时间"
        }
      ],
	}
}
//导出excel
async exportExcel() {
  await this.getListData("excel"); //执行列表接口
  exportD.excel(
	this.tableCol, //获取头部参数
	this.exportExcelData, //获取列表数据
	this.$route.meta.title //获取当前标题
  );
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51