Skip to content

Commit 4b5b0a6

Browse files
PanJiaChenPanJiaChen
committed
feature[Excel]: add export merge header excel demo
1 parent 3d973f7 commit 4b5b0a6

File tree

6 files changed

+128
-27
lines changed

6 files changed

+128
-27
lines changed

‎src/lang/en.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ export default {
5757
excel: 'Excel',
5858
exportExcel: 'Export Excel',
5959
selectExcel: 'Export Selected',
60+
mergeHeader: 'Merge Header',
6061
uploadExcel: 'Upload Excel',
6162
zip: 'Zip',
6263
pdf: 'PDF',

‎src/lang/es.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ export default {
5757
excel: 'Excel',
5858
exportExcel: 'Exportar a Excel',
5959
selectExcel: 'Export seleccionado',
60+
mergeHeader: 'Merge Header',
6061
uploadExcel: 'Subir Excel',
6162
zip: 'Zip',
6263
pdf: 'PDF',

‎src/lang/zh.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,9 +55,10 @@ export default {
5555
page404: '404',
5656
errorLog: '错误日志',
5757
excel: 'Excel',
58-
exportExcel: 'Export Excel',
59-
selectExcel: 'Export Selected',
60-
uploadExcel: 'Upload Excel',
58+
exportExcel: '导出 Excel',
59+
selectExcel: '导出 已选择项',
60+
mergeHeader: '导出 多级表头',
61+
uploadExcel: '上传 Excel',
6162
zip: 'Zip',
6263
pdf: 'PDF',
6364
exportZip: 'Export Zip',

‎src/router/index.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -279,6 +279,12 @@ export const asyncRoutes = [
279279
name: 'SelectExcel',
280280
meta: { title: 'selectExcel' }
281281
},
282+
{
283+
path: 'export-merge-header',
284+
component: () => import('@/views/excel/mergeHeader'),
285+
name: 'MergeHeader',
286+
meta: { title: 'mergeHeader' }
287+
},
282288
{
283289
path: 'upload-excel',
284290
component: () => import('@/views/excel/uploadExcel'),

‎src/views/excel/exportExcel.vue

Lines changed: 15 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -19,22 +19,20 @@
1919
{{ scope.$index }}
2020
</template>
2121
</el-table-column>
22-
<el-table-column label="主要信息" align="center">
23-
<el-table-column label="Title">
24-
<template slot-scope="scope">
25-
{{ scope.row.title }}
26-
</template>
27-
</el-table-column>
28-
<el-table-column label="Author" width="110" align="center">
29-
<template slot-scope="scope">
30-
<el-tag>{{ scope.row.author }}</el-tag>
31-
</template>
32-
</el-table-column>
33-
<el-table-column label="Readings" width="115" align="center">
34-
<template slot-scope="scope">
35-
{{ scope.row.pageviews }}
36-
</template>
37-
</el-table-column>
22+
<el-table-column label="Title">
23+
<template slot-scope="scope">
24+
{{ scope.row.title }}
25+
</template>
26+
</el-table-column>
27+
<el-table-column label="Author" width="110" align="center">
28+
<template slot-scope="scope">
29+
<el-tag>{{ scope.row.author }}</el-tag>
30+
</template>
31+
</el-table-column>
32+
<el-table-column label="Readings" width="115" align="center">
33+
<template slot-scope="scope">
34+
{{ scope.row.pageviews }}
35+
</template>
3836
</el-table-column>
3937
<el-table-column align="center" label="Date" width="220">
4038
<template slot-scope="scope">
@@ -49,12 +47,10 @@
4947
<script>
5048
import { fetchList } from '@/api/article'
5149
import { parseTime } from '@/utils'
52-
5350
// options components
5451
import FilenameOption from './components/FilenameOption'
5552
import AutoWidthOption from './components/AutoWidthOption'
5653
import BookTypeOption from './components/BookTypeOption'
57-
5854
export default {
5955
name: 'ExportExcel',
6056
components: { FilenameOption, AutoWidthOption, BookTypeOption },
@@ -82,17 +78,13 @@ export default {
8278
handleDownload() {
8379
this.downloadLoading = true
8480
import('@/vendor/Export2Excel').then(excel => {
85-
const multiHeader = [['Id', '主要信息', '', '', 'Date']]
86-
const tHeader = ['', 'Title', 'Author', 'Readings', '']
81+
const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
8782
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
8883
const list = this.list
8984
const data = this.formatJson(filterVal, list)
90-
const merges = ['A1:A2', 'B1:D1', 'E1:E2']
9185
excel.export_json_to_excel({
92-
multiHeader,
9386
header: tHeader,
9487
data,
95-
merges,
9688
filename: this.filename,
9789
autoWidth: this.autoWidth,
9890
bookType: this.bookType
@@ -121,4 +113,3 @@ export default {
121113
padding: 0 12px 0 30px;
122114
}
123115
</style>
124-

‎src/views/excel/mergeHeader.vue

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<template>
2+
<div class="app-container">
3+
4+
<el-button :loading="downloadLoading" style="margin-bottom:20px" type="primary" icon="document" @click="handleDownload">Export</el-button>
5+
6+
<el-table
7+
v-loading="listLoading"
8+
ref="multipleTable"
9+
:data="list"
10+
element-loading-text="Loading"
11+
border
12+
fit
13+
highlight-current-row
14+
>
15+
<el-table-column align="center" label="Id" width="95">
16+
<template slot-scope="scope">
17+
{{ scope.$index }}
18+
</template>
19+
</el-table-column>
20+
<el-table-column label="Main Information" align="center">
21+
<el-table-column label="Title">
22+
<template slot-scope="scope">
23+
{{ scope.row.title }}
24+
</template>
25+
</el-table-column>
26+
<el-table-column label="Author" width="110" align="center">
27+
<template slot-scope="scope">
28+
<el-tag>{{ scope.row.author }}</el-tag>
29+
</template>
30+
</el-table-column>
31+
<el-table-column label="Readings" width="115" align="center">
32+
<template slot-scope="scope">
33+
{{ scope.row.pageviews }}
34+
</template>
35+
</el-table-column>
36+
</el-table-column>
37+
<el-table-column align="center" label="Date" width="220">
38+
<template slot-scope="scope">
39+
<i class="el-icon-time"/>
40+
<span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
41+
</template>
42+
</el-table-column>
43+
</el-table>
44+
45+
</div>
46+
</template>
47+
48+
<script>
49+
import { fetchList } from '@/api/article'
50+
import { parseTime } from '@/utils'
51+
52+
export default {
53+
name: 'MergeHeader',
54+
data() {
55+
return {
56+
list: null,
57+
listLoading: true,
58+
downloadLoading: false
59+
}
60+
},
61+
created() {
62+
this.fetchData()
63+
},
64+
methods: {
65+
fetchData() {
66+
this.listLoading = true
67+
fetchList(this.listQuery).then(response => {
68+
this.list = response.data.items
69+
this.listLoading = false
70+
})
71+
},
72+
handleDownload() {
73+
this.downloadLoading = true
74+
import('@/vendor/Export2Excel').then(excel => {
75+
const multiHeader = [['Id', 'Main Information', '', '', 'Date']]
76+
const header = ['', 'Title', 'Author', 'Readings', '']
77+
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
78+
const list = this.list
79+
const data = this.formatJson(filterVal, list)
80+
const merges = ['A1:A2', 'B1:D1', 'E1:E2']
81+
excel.export_json_to_excel({
82+
multiHeader,
83+
header,
84+
merges,
85+
data
86+
})
87+
this.downloadLoading = false
88+
})
89+
},
90+
formatJson(filterVal, jsonData) {
91+
return jsonData.map(v => filterVal.map(j => {
92+
if (j === 'timestamp') {
93+
return parseTime(v[j])
94+
} else {
95+
return v[j]
96+
}
97+
}))
98+
}
99+
}
100+
}
101+
</script>

0 commit comments

Comments
 (0)