Skip to content

Commit 8d242a0

Browse files
PanJiaChenPanJiaChen
committed
feature[Excel]: add export merge header excel demo
1 parent 763b31d commit 8d242a0

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
@@ -18,22 +18,20 @@
1818
{{ scope.$index }}
1919
</template>
2020
</el-table-column>
21-
<el-table-column label="主要信息" align="center">
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>
36-
</el-table-column>
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>
3735
</el-table-column>
3836
<el-table-column align="center" label="Date" width="220">
3937
<template slot-scope="scope">
@@ -48,12 +46,10 @@
4846
<script>
4947
import { fetchList } from '@/api/article'
5048
import { parseTime } from '@/utils'
51-
5249
// options components
5350
import FilenameOption from './components/FilenameOption'
5451
import AutoWidthOption from './components/AutoWidthOption'
5552
import BookTypeOption from './components/BookTypeOption'
56-
5753
export default {
5854
name: 'ExportExcel',
5955
components: { FilenameOption, AutoWidthOption, BookTypeOption },
@@ -81,17 +77,13 @@ export default {
8177
handleDownload() {
8278
this.downloadLoading = true
8379
import('@/vendor/Export2Excel').then(excel => {
84-
const multiHeader = [['Id', '主要信息', '', '', 'Date']]
85-
const tHeader = ['', 'Title', 'Author', 'Readings', '']
80+
const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
8681
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
8782
const list = this.list
8883
const data = this.formatJson(filterVal, list)
89-
const merges = ['A1:A2', 'B1:D1', 'E1:E2']
9084
excel.export_json_to_excel({
91-
multiHeader,
9285
header: tHeader,
9386
data,
94-
merges,
9587
filename: this.filename,
9688
autoWidth: this.autoWidth,
9789
bookType: this.bookType
@@ -120,4 +112,3 @@ export default {
120112
padding: 0 12px 0 30px;
121113
}
122114
</style>
123-

‎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)