vuejs导出excel表格合并相同名称

复制代码<template>
  <div>
    <el-button @click="exportExcel">点击导出</el-button>
    <el-table
      :data="tableData"
      border
      ref="report-table"
      :span-method="formatTable"
      style="width: 100%"
    >
      <el-table-column prop="hospitalName" label="医院名称" width="380">
      </el-table-column>
      <el-table-column prop="feeTypeName" label="缴费类型" width="180">
      </el-table-column>
      <el-table-column prop="tuifeibzName" label="收费状态"> </el-table-column>
      <el-table-column prop="num" label="数量"> </el-table-column>
    </el-table>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

复制代码//安装 引入
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  name: "HelloWorld",
  data() {
    return {
      tableData: [],
      httpData: [
        {
          hospitalName: "苍南县",
          feeTypeName: "住院",
          tuifeibzName: "收费",
          num: 1837,
        },
        {
          hospitalName: "苍南县",
          feeTypeName: "住院",
          tuifeibzName: "退费",
          num: -56,
        },
        {
          hospitalName: "苍南县",
          feeTypeName: "门诊",
          tuifeibzName: "收费",
          num: 4777
        },
        {
          hospitalName: "苍南县",
          feeTypeName: "门诊",
          tuifeibzName: "退费",
          num: -59
        },
        {
          hospitalName: "河北区",
          feeTypeName: "体检",
          tuifeibzName: "收费",
          num: 0,
          num1: 0
        },
        {
          hospitalName: "河北区",
          feeTypeName: "体检",
          tuifeibzName: "退费",
          num: 0
        },
        {
          hospitalName: "河北区",
          feeTypeName: "合计",
          tuifeibzName: "",
          num: 6499
        },
        {
          hospitalName: "悉尼县",
          feeTypeName: "住院",
          tuifeibzName: "收费",
          num: 678
        },
        {
          hospitalName: "悉尼县",
          feeTypeName: "住院",
          tuifeibzName: "退费",
          num: -50
        },
        {
          hospitalName: "悉尼县",
          feeTypeName: "门诊",
          tuifeibzName: "收费",
          num: 13530
        },
        {
          hospitalName: "悉尼县",
          feeTypeName: "门诊",
          tuifeibzName: "退费",
          num: 0
        }]
}
  },
  created() {
    setTimeout(() => {
      this.tableData = this.httpData;
      this.getRowColumn(this.httpData);
    }, 100);
  },
  methods: {
    // 根据相同值合并
    getRowColumn(data) {
      let self = this;
      self.rowAndColumn = [];
      self.rowRoomColumn = [];
      for (var i = 0; i < data.length; i++) {
        if (i == 0) {
          self.rowAndColumn.push(1);
          self.pos = 0;
          self.rowRoomColumn.push(1);
          self.posT = 0;
        } else {
          if (data[i].hospitalName == data[i - 1].hospitalName) {
            self.rowAndColumn[self.pos] += 1;
            self.rowAndColumn.push(0);
 
            if (data[i].feeTypeName == data[i - 1].feeTypeName) {
              self.rowRoomColumn[self.posT] += 1;
              self.rowRoomColumn.push(0);
            } else {
              self.rowRoomColumn.push(1);
              self.posT = i;
            }
          } else {
            self.rowAndColumn.push(1);
            self.pos = i;
            self.rowRoomColumn.push(1);
            self.posT = i;
          }
        }
      }
    },
//
    formatTable({ row, column, rowIndex, columnIndex }) {
      let self = this;
      if (columnIndex == 0) {
        if (self.rowAndColumn[rowIndex]) {
          let rowNum = self.rowAndColumn[rowIndex];
          return {
            rowspan: rowNum,
            colspan: rowNum > 0 ? 1 : 0,
          };
        }
        return {
          rowspan: 0,
          colspan: 0,
        };
      }
      if (columnIndex == 1) {
        if (self.rowRoomColumn[rowIndex]) {
          let roomNum = self.rowRoomColumn[rowIndex];
          return {
            rowspan: roomNum,
            colspan: roomNum > 0 ? 1 : 0,
          };
        }
        return {
          rowspan: 0,
          colspan: 0,
        };
      }
    },
    exportExcel() {
      try {
        const $e = this.$refs["report-table"].$el;
        let $table = $e.querySelector(".el-table__fixed");
        if (!$table) {
          $table = $e;
        }
        const wb = XLSX.utils.table_to_book($table, {
          raw: true,
        });
        const wbout = XLSX.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array",
        });
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          "导出.xlsx"
        );
      } catch (e) {
        if (typeof concole !== "undefined") console.error(e);
      }
    },
  },
}
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171

 

进入前端入门建站教程官网入口

excel拆分单元格快捷键怎么用

如何利用PHPExcel类库建php将数据格式转为excel

vuejs导入excel（多个Sheet表全部解析）

vuejs前端做一个点击按钮下载excel文件模板功能

vuejs导入excel表格解析成JSON数据（日期变成数字）解决方法

标签： excel, 合并, 导出

上面是“vuejs导出excel表格合并相同名称”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_1878.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！