From 4b5b0a6e6ba115adb1f327eb18e202e348e2e091 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Sun, 17 Mar 2019 16:52:11 +0800
Subject: [PATCH] feature[Excel]: add export merge header excel demo
---
src/lang/en.js | 1 +
src/lang/es.js | 1 +
src/lang/zh.js | 7 ++-
src/router/index.js | 6 ++
src/views/excel/exportExcel.vue | 39 +++++-------
src/views/excel/mergeHeader.vue | 101 ++++++++++++++++++++++++++++++++
6 files changed, 128 insertions(+), 27 deletions(-)
create mode 100644 src/views/excel/mergeHeader.vue
diff --git a/src/lang/en.js b/src/lang/en.js
index caed5c5b..963c60d3 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -57,6 +57,7 @@ export default {
excel: 'Excel',
exportExcel: 'Export Excel',
selectExcel: 'Export Selected',
+ mergeHeader: 'Merge Header',
uploadExcel: 'Upload Excel',
zip: 'Zip',
pdf: 'PDF',
diff --git a/src/lang/es.js b/src/lang/es.js
index f0d7de41..31fa8303 100755
--- a/src/lang/es.js
+++ b/src/lang/es.js
@@ -57,6 +57,7 @@ export default {
excel: 'Excel',
exportExcel: 'Exportar a Excel',
selectExcel: 'Export seleccionado',
+ mergeHeader: 'Merge Header',
uploadExcel: 'Subir Excel',
zip: 'Zip',
pdf: 'PDF',
diff --git a/src/lang/zh.js b/src/lang/zh.js
index 9bea838e..574cba11 100644
--- a/src/lang/zh.js
+++ b/src/lang/zh.js
@@ -55,9 +55,10 @@ export default {
page404: '404',
errorLog: '错误日志',
excel: 'Excel',
- exportExcel: 'Export Excel',
- selectExcel: 'Export Selected',
- uploadExcel: 'Upload Excel',
+ exportExcel: '导出 Excel',
+ selectExcel: '导出 已选择项',
+ mergeHeader: '导出 多级表头',
+ uploadExcel: '上传 Excel',
zip: 'Zip',
pdf: 'PDF',
exportZip: 'Export Zip',
diff --git a/src/router/index.js b/src/router/index.js
index 529c1ab2..fcff584e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -279,6 +279,12 @@ export const asyncRoutes = [
name: 'SelectExcel',
meta: { title: 'selectExcel' }
},
+ {
+ path: 'export-merge-header',
+ component: () => import('@/views/excel/mergeHeader'),
+ name: 'MergeHeader',
+ meta: { title: 'mergeHeader' }
+ },
{
path: 'upload-excel',
component: () => import('@/views/excel/uploadExcel'),
diff --git a/src/views/excel/exportExcel.vue b/src/views/excel/exportExcel.vue
index 8e969386..253f1641 100644
--- a/src/views/excel/exportExcel.vue
+++ b/src/views/excel/exportExcel.vue
@@ -19,22 +19,20 @@
{{ scope.$index }}
</template>
</el-table-column>
- <el-table-column label="主要信息" align="center">
- <el-table-column label="Title">
- <template slot-scope="scope">
- {{ scope.row.title }}
- </template>
- </el-table-column>
- <el-table-column label="Author" width="110" align="center">
- <template slot-scope="scope">
- <el-tag>{{ scope.row.author }}</el-tag>
- </template>
- </el-table-column>
- <el-table-column label="Readings" width="115" align="center">
- <template slot-scope="scope">
- {{ scope.row.pageviews }}
- </template>
- </el-table-column>
+ <el-table-column label="Title">
+ <template slot-scope="scope">
+ {{ scope.row.title }}
+ </template>
+ </el-table-column>
+ <el-table-column label="Author" width="110" align="center">
+ <template slot-scope="scope">
+ <el-tag>{{ scope.row.author }}</el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column label="Readings" width="115" align="center">
+ <template slot-scope="scope">
+ {{ scope.row.pageviews }}
+ </template>
</el-table-column>
<el-table-column align="center" label="Date" width="220">
<template slot-scope="scope">
@@ -49,12 +47,10 @@
<script>
import { fetchList } from '@/api/article'
import { parseTime } from '@/utils'
-
// options components
import FilenameOption from './components/FilenameOption'
import AutoWidthOption from './components/AutoWidthOption'
import BookTypeOption from './components/BookTypeOption'
-
export default {
name: 'ExportExcel',
components: { FilenameOption, AutoWidthOption, BookTypeOption },
@@ -82,17 +78,13 @@ export default {
handleDownload() {
this.downloadLoading = true
import('@/vendor/Export2Excel').then(excel => {
- const multiHeader = [['Id', '主要信息', '', '', 'Date']]
- const tHeader = ['', 'Title', 'Author', 'Readings', '']
+ const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
const list = this.list
const data = this.formatJson(filterVal, list)
- const merges = ['A1:A2', 'B1:D1', 'E1:E2']
excel.export_json_to_excel({
- multiHeader,
header: tHeader,
data,
- merges,
filename: this.filename,
autoWidth: this.autoWidth,
bookType: this.bookType
@@ -121,4 +113,3 @@ export default {
padding: 0 12px 0 30px;
}
</style>
-
diff --git a/src/views/excel/mergeHeader.vue b/src/views/excel/mergeHeader.vue
new file mode 100644
index 00000000..81d12a89
--- /dev/null
+++ b/src/views/excel/mergeHeader.vue
@@ -0,0 +1,101 @@
+<template>
+ <div class="app-container">
+
+ <el-button :loading="downloadLoading" style="margin-bottom:20px" type="primary" icon="document" @click="handleDownload">Export</el-button>
+
+ <el-table
+ v-loading="listLoading"
+ ref="multipleTable"
+ :data="list"
+ element-loading-text="Loading"
+ border
+ fit
+ highlight-current-row
+ >
+ <el-table-column align="center" label="Id" width="95">
+ <template slot-scope="scope">
+ {{ scope.$index }}
+ </template>
+ </el-table-column>
+ <el-table-column label="Main Information" align="center">
+ <el-table-column label="Title">
+ <template slot-scope="scope">
+ {{ scope.row.title }}
+ </template>
+ </el-table-column>
+ <el-table-column label="Author" width="110" align="center">
+ <template slot-scope="scope">
+ <el-tag>{{ scope.row.author }}</el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column label="Readings" width="115" align="center">
+ <template slot-scope="scope">
+ {{ scope.row.pageviews }}
+ </template>
+ </el-table-column>
+ </el-table-column>
+ <el-table-column align="center" label="Date" width="220">
+ <template slot-scope="scope">
+ <i class="el-icon-time"/>
+ <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
+ </template>
+ </el-table-column>
+ </el-table>
+
+ </div>
+</template>
+
+<script>
+import { fetchList } from '@/api/article'
+import { parseTime } from '@/utils'
+
+export default {
+ name: 'MergeHeader',
+ data() {
+ return {
+ list: null,
+ listLoading: true,
+ downloadLoading: false
+ }
+ },
+ created() {
+ this.fetchData()
+ },
+ methods: {
+ fetchData() {
+ this.listLoading = true
+ fetchList(this.listQuery).then(response => {
+ this.list = response.data.items
+ this.listLoading = false
+ })
+ },
+ handleDownload() {
+ this.downloadLoading = true
+ import('@/vendor/Export2Excel').then(excel => {
+ const multiHeader = [['Id', 'Main Information', '', '', 'Date']]
+ const header = ['', 'Title', 'Author', 'Readings', '']
+ const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
+ const list = this.list
+ const data = this.formatJson(filterVal, list)
+ const merges = ['A1:A2', 'B1:D1', 'E1:E2']
+ excel.export_json_to_excel({
+ multiHeader,
+ header,
+ merges,
+ data
+ })
+ this.downloadLoading = false
+ })
+ },
+ formatJson(filterVal, jsonData) {
+ return jsonData.map(v => filterVal.map(j => {
+ if (j === 'timestamp') {
+ return parseTime(v[j])
+ } else {
+ return v[j]
+ }
+ }))
+ }
+ }
+}
+</script>